@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&display=swap');
/* CSS Document */

/* ===================共通=================== */
html {
  scroll-padding-top: 80px; 
  scroll-behavior: smooth; 
}
button:hover {
    border-color: transparent !important;
    /* もしくは */
    border: none !important;
}
button {
  -webkit-tap-highlight-color: transparent;
}
.pc {
    display: block;
}
	
.sp {
    display: none;
}
.memo {
	    font-size: 1vw;
	display:inline-block;
	padding:0.4vw 0 0.4vw;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 30%);
  transition: 0.6s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
@media only screen and (max-width: 768px) {
.memo {
  	font-size: clamp(10px, 1.75vw, 15px);
	line-height: 1.1em;
}
}
@media only screen and (max-width: 500px) {
.pc {
    display: none;
}
.sp {
    display: block;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 0.6s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.memo {
  	font-size: clamp(10px, 3vw, 12px);
}
}



/* ======================================================================
診断キャンペーン
====================================================================== */
/* == ファーストビュー == */
.fast {
	width:100%;
	padding: 6vw 0 2vw !important;
    background-image: linear-gradient(180deg, rgb(255 146 182), rgb(255 26 132));
	overflow: hidden;
    position: relative;
    z-index: 1;
}
.fast::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    will-change: transform, opacity;
background-image: linear-gradient(45deg, #ffffff1a 25%, transparent 25%, transparent 50%, #ffffff1a 50%, #ffffff1a 75%, transparent 75%, transparent);
	background-size: 150px 150px;
}
.fast_contents {
	width:78%;
	margin:0 auto;
	text-align:center;
}
img.fast_img {
	width:100%;
	filter: drop-shadow(0px 2px 6px rgb(255 26 132 / 50%));
}
.fastabout_text {
	width:90%;
	margin:0% auto 1%;
	color: #fff;
}
.fastabout_text p {
    font-size: 3.3vw;
	font-weight: 900;
	line-height: 1.3em;
    padding-bottom: 0.7em;
    text-align: center;
}
@media only screen and (max-width: 500px) {
.fast {
    width: 100%;
    padding: 13vw 0 3vw !important;
}
.fast_contents {
	margin: 2% auto 2%;
    width: 100%;
}
.fastabout_text p {
    font-size: 5.3vw;
}
}

/* == 質問 == */
.about_box {
	width:100%;
	background-color:#fff;
    position: relative;
	padding: 1vw 0 1.8vw;
    z-index: 8;
}
.about_box:before {
    position: absolute;
    content: "";
	background: #fff;
	-webkit-mask-image: url(https://boyslove.tokyo/wp-content/uploads/image/nami.svg);
    mask-image: url(https://boyslove.tokyo/wp-content/uploads/image/nami.svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
    mask-size: auto 100%;
	height: 6vw; 
	top: -1.9vw;
    left: 0;
    right: 0;
    z-index: -2;
    display: block;
	transform: scaleY(-1);
}
.about_box:after {
    position: absolute;
    content: "";
	background: #fff;
	-webkit-mask-image: url(https://boyslove.tokyo/wp-content/uploads/image/nami.svg);
    mask-image: url(https://boyslove.tokyo/wp-content/uploads/image/nami.svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
    mask-size: auto 100%;
	height: 6vw; 
    left: 0;
    right: 0;
    z-index: -2;
    display: block;
	bottom: -1.9vw;
}
.choose_box {
    height: auto;
    width: 60%;
    margin:0px auto 0 auto;
    padding-bottom: 10px;
    background-size: auto auto;
    background-color: #b13744;
    background-image: repeating-linear-gradient(45deg, #a2273482, #a2273482 20px, transparent 20px, transparent 40px), repeating-linear-gradient(-45deg, #a2273482, #a2273482 20px, transparent 20px, transparent 40px);
    border-radius: 10px;
    text-decoration : none ; 
    outline : 3px solid #f7f1c8;
    outline-offset : -10px;
    box-shadow: 0px 2px 12px 0px rgb(114 145 186 / 50%);
	padding: 3% 0 5%;
}
.choose_box ul {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    flex-wrap: wrap;
	padding: 0;
}
.choose_box ul li {
    list-style: none;
    margin: 0 auto 20px auto;
    border-radius: 6px;
}
.choose_box ul li:nth-child(2n) {
    text-align: center;
}
.choose_box ul li a {
    display: block;
    padding: 1.5vw 3vw;
    text-align: center;
    font-weight: 900;
    font-size:1.55vw;
	line-height: 1.3em;
    text-decoration: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.choose_box ul li a:hover {
    background-color: #fff;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}
.fit {
    left: 0px;
    top: 20px;
    width: 100%;
}
#a_01 span,#a_02 span,#a_03 span,#a_04 span,#a_05 span,#a_06 span {
    display: block;
    width:100%;
}
#a_01 a,#a_02 a,#a_03 a,#a_04 a,#a_05 a,#a_06 a {
    display: block;
    width:100%;
    text-align: center;
}
.question_text {
    font-size: 2.2vw;
	line-height: 1.3em;
	font-weight:900;
    display: block;
    text-align: center;
    padding-top: 45px;
    padding-bottom: 20px;
    color: #fff !important;
  }
.about_box .about {
    background-color: #fff;
    color: #CC7F00;
	border: solid 1px #903e0a;
    box-shadow: 2px 0px 10px #ba1130;
    padding: 1vw 3vw;
}
.question {
    background-color: #FFFEB9;
    box-shadow: 2px 0px 10px #ba1130;
	border: solid 1px #903e0a;
}
.question a {
    color: #0069d9;
    background-color: #FFFEB9;
}
.question a:hover {
    color: #ff0088;
}
.question_b {
    background-color: #FFFEB9;
}
.question_b a {
    color: #ff0088;
}
.question_b a:hover {
    color: #ff0088;
}
.back {
    width: 50%;
    background-color: #fff;
	border-radius: 6px;
    color: #903e0a;
	border: solid 1px #903e0a;
    box-shadow: 2px 0px 10px #ba1130;
}
.back a {
    color: #903e0a;
    background-color: #fff;
}
.back a:hover {
    color: #FFD899;
    background-color: #CC7F00;
}
img.btn_illustration {
    display: block;
    width: 40%;
    text-align: center;
    margin: 2% auto 1%;
}
@media only screen and (max-width: 768px) {
.choose_box {
    width: 75%;
    outline: 2px solid #f7f1c8;
}
.question_text {
    font-size: 3.2vw;
}
.choose_box ul li a {
    padding: 2vw 3vw;
    font-size: 2.4vw;
}
}
@media only screen and (max-width: 500px) {
.choose_box {
    width: 90%;
    outline: 2px solid #f7f1c8;
    outline-offset: -8px;
    padding: 0% 2% 12%;
}
.question_text {
    font-size: 4.8vw;
    line-height: 1.4em;
}
.choose_box ul {
    width: 85%;
}
.choose_box ul li a {
    padding: 4% 7%;
    font-size: 4.2vw;
}
.choose_box ul li {
    margin: 0 auto 10px auto;
}
img.btn_illustration {
    display: block;
    width: 75%;
    text-align: center;
    margin: 7% auto 3%;
}
.about_box {
    padding: 1vw 0 5.8vw;
}
.about_box:before {
    height: 10vw;
    top: -2.9vw;
}
.about_box:after {
    height: 10vw;
    bottom: -2.9vw;
}
}


/* == 回答 == */
.answer_warp .answer_box_warp {
 	margin: -1% auto 0 auto;
    z-index: 2;
    position: relative;
}
.answer_warp img.btn_illustration {
    display: block;
    width: 45%;
    text-align: center;
    margin: 0 auto;
}
.answer_warp .choose_box {
    width: 70%;	
	background-color:#fff;
	background-image:none;
	padding: 0% 0 5%;
    outline: none;
    outline-offset: 0px; 
	border:4px solid #af4154;
	border-radius: 10px 10px 10px 10px;
    margin: 0px auto 0 auto;
}
.answer_warp .title_bg {
	background-color: #ff79b8;
	padding: 4% 0 3%;
	margin-bottom:3%;
	border-radius: 10px 10px 0px 0px;
	border:7px solid #fff;
	position:relative;
}
.rare {
	display:block;
	position:absolute;
	width:11vw;
	top: 50%;
	transform: translateY(-50%);
	left:10%;
}
.answer_warp .answer_text {
    font-size: 2.2vw;
    line-height: 1.3em;
    font-weight: 900;
    display: block;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #fff !important;
  }
.answer_warp .answer_text_type {
    font-size: 4vw;
    display: block;
    font-weight: 800;
    text-align: center;
    color: #fff !important;
    box-shadow: none;
    margin: 0px auto;
    line-height: 1.3em;
 }
.answer_warp .answer_box {
	width:80%;
	margin:0 auto;
	display:flex;
    flex-direction: row;
    justify-content: center;
	flex-wrap: wrap;
}
.answer_warp .answer_img {
	width:45%;
}
.answer_warp .answer_img img {
	width:85%;
}
.answer_warp .osusume {
	width:100%;
	background-image: linear-gradient(90deg, rgba(255, 218, 229, 1), rgba(251, 253, 191, 1));
	border-radius:50px;
	text-align:center;
	font-size:2vw;
	font-weight:800;
	color:#af4154;
	margin-bottom:3%;
}
.answer_warp .answer_text_box {
	width:55%;
}
.answer_warp .answer_text_box p {
    font-size: 1.8vw;
    line-height: 1.6em;
    font-weight: 900;
    color: #af4154;
}
.answer_warp .answer_box_area {
	margin-top:5%;
}
.answer_warp .answer_box_area hr {
	width:100%;
	display:block;
}
.answer_warp .answer_box_area .answer_img {
	width:25%;
}
.answer_warp .answer_box_area .answer_img img {
	width:100%;
}
.answer_warp .answer_box_area .answer_text_box {
	width:70%;
	padding-right:2%;
}
.answer_warp .answer_box_area .answer_text_box p {
    font-size: 1.2vw;
    line-height: 1.6em;
    font-weight: 700;
    color: #af4154;
}
.answer_warp .answer_box_area.s_img .answer_img {
	width:40%;
}
.answer_warp .answer_box_area.s_img .answer_text_box {
	width:60%;
	padding-right:3%;
}
.answer_warp .answer_box_area .answer_text_box p span {
    display: block;
    font-size: 2.5vw;
    padding-bottom: 2%;
    color: #ff79b8;
    font-weight: 900;
    line-height: 1.2em;
}
.answer_warp .answer_share {
    width:55%;
	margin: 0 auto;
}
.answer_warp .answer_share a.button_b {
    width:100%;	
}
.answer_warp .answer_share a.button_b_layer {
	margin-bottom:2%;
    font-size: 1.8vw;
}
.answer_warp .answer_share .button_b.answer_share_btn {
    background: linear-gradient(90deg, rgb(255 121 174), rgb(255 48 121) 50%, rgba(255 121 174));
    border: solid 2px #d4a846;
}
@media only screen and (max-width: 500px) {
.answer_warp .fast {
        padding: 13vw 0 6vw !important;
}
.answer_warp .answer_box_warp {
    margin: -3% auto 0 auto;
}
.answer_warp img.btn_illustration {
    width: 70%;
}
.answer_warp .choose_box {
    width: 90%;
    border: 2px solid #af4154;
}
.answer_warp .answer_box {
    width: 90%;
    margin-top: 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
.answer_warp .answer_text {
    font-size: 4.2vw;
}
.answer_warp .answer_text_type {
    font-size: 8vw;
}
.answer_warp .title_bg {
    border: 5px solid #fff;
	padding: 6% 0 5%;
}
.rare {
    display: block;
    position: absolute;
    width: 25vw;
    top: -34%;
    transform: none;
    right: 0;
    left: -9%;
}
.answer_warp .answer_img {
    width: 70%;
	text-align:center;
	margin: 0 auto;
}
.answer_warp .answer_img img {
    width: 100%;
}
.answer_warp .answer_text_box {
    width: 100%;
}
.answer_warp .answer_text_box p {
    font-size: 4vw;
    line-height: 1.6em;
    margin-top: 5%;
}
.answer_warp .osusume {
    font-size: 3.5vw;
	padding: 1% 0%;
}
.answer_warp .answer_box_area .answer_text_box {
    width: 100%;
    padding-right: 0%;
	padding-bottom:3%;
}
.answer_warp .answer_box_area.s_img .answer_text_box {
    width: 100%;
    padding-right: 0%;
	padding-bottom:3%;
}
.answer_warp .answer_box_area .answer_img {
    width: 60%;
}
.answer_warp .answer_box_area .answer_text_box p {
    font-size: 3.5vw;
    line-height: 1.6em;
    font-weight: 600;
    margin-top: 0%;
}
.answer_warp .answer_box_area .answer_text_box p span {
    font-size: 6vw;
    padding-bottom: 1%;
}
.answer_warp .answer_box_area.s_img .answer_img {
    width: 60%;
}
.answer_warp .answer_share {
    width: 80%;
}
.answer_warp .answer_share a.button_b_layer {
    padding: .7em 1em .7em 1em;
    font-size: 0.8em;
}
	
}






.next_hall {
	width:90%;
	margin:5% auto 8%;
}
.next_hall_text {
	text-align:center;
	font-weight:900;
	font-size:clamp(1em, 2.2vw, 4em);
	color: #af4154;
	line-height:1.3em;
}
.next_hall a.button_b {
	width:50% !important;
	background: linear-gradient(90deg, #465DAA, #465DAA 50%, #465DAA);
}
.next_hall a.button_a {
    width: 100%;
    background-image: none !important;
	background: #465DAA;
    border: solid 3.3px #af4154;
    color: #fff;
}
.next_hall a.button_b_layer {
    box-shadow: 0 4px 0 #af4154;
}
.aisaatsu_green {
    margin-top: 6%;
    width: auto;
    position: relative; /* 疑似要素の基準にする */
    z-index: 1;         /* 中身のimgを前面に出すため */
	text-align:center;
}
.aisaatsu_green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://boyslove.tokyo/wp-content/uploads/image/highlight/happa.webp) repeat top left;
    background-size: 50%;
    clip-path: ellipse(100% 100% at 50% 100%);
    z-index: -1; /* 中身のimgの後ろに配置 */
}
img.aisaatsu_green_fukurou {
	width:65%;
	text-align:center;
	margin-bottom:8%;
}
@media only screen and (max-width: 768px) {
.next_hall a.button_b {
	width:70% !important;
}
.next_hall_text {
	line-height:1.3em;
}
img.aisaatsu_green_fukurou {
	width:80%;
}
}
@media only screen and (max-width: 500px) {
.next_hall_text {
	line-height: 1.5em;
	font-size: clamp(0.8em, 5vw, 2em);
}
.next_hall a.button_b {
    width: 95% !important;
}
.next_hall {
    width: 90%;
    margin: 10% auto 13%;
}
img.aisaatsu_green_fukurou {
    width: 95%;
}
.aisaatsu_green {
    margin-top: 11%;
}
}