@charset "utf-8";
/* CSS Document たびらい会員登録予約キャンペーン*/
body { font-family:"メイリオ",YuGothic, '游ゴシック',  Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	color:#333;}

/* header
-------------------------------------------------- */
#header { position:relative; width:1000px; height:82px; margin:0 auto;}
#header h1 { float:left; padding:20px 0 0;}

#header .social_btn { float:right; width:310px; height:65px; padding-top:10px;}

.socialbuttons .btn_area {
    height: 65px;
    overflow: hidden;
    padding: 10px 0px;
}
.socialbuttons .btn_area div {
    float: right;
}

/* vs */

/* mv */
.vs .mv {
	text-align: center;
    position: relative;
}

.vs .vote {
	position: absolute;
	top: 83%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 980px;
    display: flex;
    justify-content: space-around;
}

/* .vs .vote p {
	font-weight: bold;
} */

.vs .vote li:nth-of-type(1) {
    font-size: 24px;
    text-align: left;
    font-weight: bold;
}

.vs .vote li:nth-of-type(2) {
	font-size: 45px;
    background: #fff;
    width: 192px;
    height: 67px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    font-weight: bold;
}

.vs .vote li:nth-of-type(2) span {
    font-size: 30px;

}

.vs .votingperiod {
	text-align: center;
    margin-top: 30px;
    font-size: 30px;
    font-weight: bold;
    color: #003894;
}

/* lead */
.vs .lead {
	font-size: 20px;
	text-align: center;
}

.vs .lead span {
	color: #E2718C;
}

.vs .lead  .after {
	font-weight: bold;
    color: #333333;
}

.vs .lead .content::before, .vs .lead .content::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 8px;
	content: '';
	/* background-image: -webkit-gradient(linear, right top, left top, from(#30cfd0), to(#330867));
	background-image: -webkit-linear-gradient(right, #30cfd0 0%, #330867 100%); */
	background-image: linear-gradient(to left, #93F5FE 0% 50%,#FFFB6C 50% 100%);
  
}

.lead .content {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

.lead .content p {
	margin-top: 30px;
	padding-top: 30px;
    line-height: 30px;
}

.vs .votebtn {
	display: flex;
    justify-content: center;
	margin: 30px 0;
}

.vs .votebtn .btn:nth-child(1) {
	padding-right: 30px;
}

/* 青ボタン */
.vs .votebtn .blue {
	width: 470px;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    transition: background-color .1s linear;
    background-color: #93F5FE;
	position: relative;
	border-radius: 8px;
    font-weight: bold;
}

.vs .votebtn .blue:link, .vs .votebtn .blue:visited {
    color: #333333;
    text-decoration: none;
}

.vs .votebtn .blue:hover {
	background-color: #e5fcff;
    color: #4494d3;
    text-decoration: none;
}

.vs .votebtn .blue::after {
    content: "";
    width: 16px;
    height: 16px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: rotate(45deg);
    box-sizing: border-box;
    margin-top: -8px;
}
/* 青ボタンend */

/* 黄色ボタン */
.vs .votebtn .yellow {
	width: 470px;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    transition: background-color .1s linear;
    background-color: #FFFB6C;
	position: relative;
	border-radius: 8px;
    font-weight: bold;
}

.vs .votebtn .yellow:link, .vs .votebtn .yellow:visited {
    color: #333333;
    text-decoration: none;
}

.vs .votebtn .yellow:hover {
	background-color: #fdffd7;
    color: #9e9820;
    text-decoration: none;
}

.vs .votebtn .yellow::after {
    content: "";
    width: 16px;
    height: 16px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: rotate(45deg);
    box-sizing: border-box;
    margin-top: -8px;
}
/* 黄色ボタンend */


/* オレンジボタン */
.loginframe a .btn {
    width: 274px;
    height: 54px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    transition: background-color .1s linear;
    background-color: #F08505;
    position: relative;
    border-radius: 8px;
    font-weight: bold;
    margin-top: 37px;
}

.loginframe  a {
    color: #fff;
    text-decoration: none;
}

.loginframe  a:hover {
    color: #fff;
    text-decoration: none;
}


.loginframe a .btn:link, .loginframe a .btn:visited {
    color: #fff;
    text-decoration: none;
}

.loginframe a .btn:hover {
    background-color: #f9dac2;
    /* color: #cf632c; */
    text-decoration: none;
}

.loginframe a .btn::after {
    content: "";
    width: 16px;
    height: 16px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: rotate(45deg);
    box-sizing: border-box;
    margin-top: -8px;
    color: #fff;
}

/* オレンジボタン */
.loginframe {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.loginframe .login {
    color: #003894;
    text-decoration: underline;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}

.loginframe .login:hover {
    color: #003894;
    text-decoration: none;
}



/* sns */
.sns {
    width: 277px;
    height: 113px;
    border: #D6D6D6 solid 1px;
    border-radius: 8px;
    margin: 0 auto;
	margin-top: 70px;
}

.sns p {
    text-align: center;
    margin-top: 20px;
	font-size: 16px;
}

.sns .icon {
	display: flex;
    justify-content: center;
	margin-top: 11px;
}

.sns .icon a:nth-child(1) {
	padding-right: 32px;
}

.sns .icon a img {
	width: 38px;
	height: 38px;
}
/* sns */

/* flow */
.flow {
    background-color: #DAF4FB;
    margin-top: 20px;
    padding-bottom: 90px;
}

.flow .item {
    color: #003894;
    font-size: 29px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 100px;

}

.flow .item::before {
    color: #fff;
    font-size: 76px;
    font-weight: bold;
    content: 'VS';
    position: relative;
    left: 20px;
    z-index: -1;
    font-style: italic;
}

.flow .unit {
    display: flex;
    max-width: 980px;
    margin: 0 auto;
    margin-top: 76px;
}

.flow .arrow {
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 33px solid transparent;
    border-bottom: 33px solid transparent;
    border-radius: 8px;
    margin: auto;
}

.flow .step {
    font-size: 20px;
    color: #003894;
    display: inline;
    /* padding: 0 10px 0; */
    background: linear-gradient(transparent 40%, #FFFF9E 60%);
    width: max-content;
    font-weight: bold;
    margin-top: 20px;
}

.flow .unit li {
    display: flex;
    flex-direction: column;
}

.flow .unit .list1,.flow .unit .list2,.flow .unit .list3 {
    width: 274px;
}



.flow li .step p {
    line-height: 24px;
    font-size: 16px;

}

.flow li .detail  {
    margin-top: 20px;
    line-height: 24px;

}

.flow li img {
    width: 274px;
    height: 179px;
    object-fit: contain;
}

/* オレンジボタン */
.flow .list1 a .btn {
    width: 274px;
    height: 54px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    transition: background-color .1s linear;
    background-color: #F08505;
    position: relative;
    border-radius: 8px;
    font-weight: bold;
    margin-top: 37px;
}

.flow .list1  a {
    color: #fff;
    text-decoration: none;
}

.flow .list1  a:hover {
    color: #fff;
    text-decoration: none;
}


/* .flow .list1 .btn a:hover {
    color: #cf632c;
} */


.flow .list1 a .btn:link, .flow .list1 a .btn:visited {
    color: #fff;
    text-decoration: none;
}

.flow .list1 a .btn:hover {
    background-color: #f9dac2;
    /* color: #cf632c; */
    text-decoration: none;
}

.flow .list1 a .btn::after {
    content: "";
    width: 16px;
    height: 16px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: rotate(45deg);
    box-sizing: border-box;
    margin-top: -8px;
    color: #fff;
}

/* オレンジボタン */

.flow .list1 .login {
    color: #003894;
    text-decoration: underline;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}

.flow .list1 .login:hover {
    color: #003894;
    text-decoration: none;
}

.flow.btn__contact .content {
    width: 670px;
    margin: 0 auto;
}

/* flow */

/* feature */
.feature .item {
    color: #003894;
    font-size: 29px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 100px;

}

.feature .item::before {
    color: #DAF4FB;
    font-size: 76px;
    font-weight: bold;
    content: 'VS';
    position: relative;
    left: 20px;
    z-index: -1;
    font-style: italic;
}

.feature .content {
    display: flex;
    background-image: linear-gradient(to left, #FFFFB9 0% 50%,#D1F4FE 50% 100%);
    margin-top: 35px;
    min-width: 980px;
}

.feature .content .group {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    margin-top: 60px;
    margin-bottom: 190px;
}

.feature .content .feature1 {
    background: #D1F4FE;
    width: 100%;
    padding-right: 30px;
}

.feature .content .feature1 .unit p:nth-child(2) {
    font-size: 26px;
    font-weight: bold;
    color: #003894;
    margin-top: 20px;
}

.feature .content .feature2 .unit p:nth-child(2) {
    font-size: 26px;
    font-weight: bold;
    color: #6A3f1d;
    margin-top: 20px;
}

.feature1 .unit p:nth-child(3) {
    position: relative;
    text-align: center;
    margin-top: 22px;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
    color: #003894;
}

.feature2 .unit p:nth-child(3) {
    position: relative;
    text-align: center;
    margin-top: 22px;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
    color: #6A3f1d;
}



.feature1 .unit p:nth-child(3)::before {
    content:url(/campaign/present_vs/images/slash_blue.jpg);
    position: absolute;
    left: -50px;
    top: 4px;
}

.feature1 .unit p:nth-child(3)::after {
    content:url(/campaign/present_vs/images/slash_blue.jpg);
    display: inline-block;
    transform: scale(-1, 1);
    position: absolute;
    right: -50px;
    bottom: -5px;
}

.feature2 .unit p:nth-child(3)::before {
    content:url(/campaign/present_vs/images/slash_brown.jpg);
    position: absolute;
    left: -50px;
    top: 4px;
}

.feature2 .unit p:nth-child(3)::after {
    content: url(/campaign/present_vs/images/slash_brown.jpg);
    display: inline-block;
    transform: scale(-1, 1);
    position: absolute;
    right: -50px;
    bottom: -5px;
}

.feature .content .feature1 .unit img:nth-of-type(2), .feature .content .feature2 .unit img:nth-of-type(2){
    width: 427px;
    height: 240px;
    object-fit: contain;
    margin-top: 18px;
}

.feature .content .feature2 {
    background: #FFFFB9;
    width: 100%;
    padding-left: 30px;
}

.feature .content .feature1 .unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.feature .content .feature1 .unit::after {
    content: "北";
    font-weight: bold;
    font-size: 415px;
    color: #CAECF6;
    position: absolute;
    bottom: 0px;
    left: -170px;
    /* z-index: 0; */
    transform: rotate(-20deg);
}

.feature .content .feature2 .unit::after {
    content: "沖";
    font-weight: bold;
    font-size: 415px;
    color: #F6F6B6;
    position: absolute;
    bottom: 0;
    right: -110px;
    /* z-index: 50; */
    transform: rotate(20deg);
}



.feature .content .feature2 .unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.feature .group .unit .icon {
    width: 58px;
    height: 46px;
    object-fit: contain;
}

.feature .content .feature1 .unit .detail,.feature .content .feature2 .unit .detail {
    position: relative;
    z-index: 2;
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
    color: #333333;
    width: 427px;
    height: auto;
}  
/* feature */

/* overview */
.overview .item {
    color: #003894;
    font-size: 29px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 100px;

}

.overview .item::before {
    color: #DAF4FB;
    font-size: 76px;
    font-weight: bold;
    content: 'VS';
    position: relative;
    left: 20px;
    z-index: -1;
    font-style: italic;
}


.overview .matter {
    max-width: 980px;
    margin: 0 auto;
    margin-top: 24px;
}

.overview .item + .matter {
    margin-top: 40px;
}


.overview .matter li {
    border-bottom: 3px solid #92A2BC;
    padding-bottom: 12px;
    width: 270px;
    font-size: 20px;
    font-weight: bold;
    color: #707070;
}

.overview .matter p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
}


/* overview */