@charset "utf-8";
/*
Title: お友だち紹介制度
Last Updated: 2024-11-01
Author: zeal
*/

/*----------------------------------------
	全体
----------------------------------------*/
html{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
	font-weight: 500;
}
body {
    min-width: auto;
}
article {
    padding-top: 0px;
}
/*----------------------------------------
    common
----------------------------------------*/
.palt { font-feature-settings: "palt";}
.under_line { text-decoration: underline;}
.text_bold {font-weight: bold;}
.block {display: block;}

/* text color */
.text_pink { color: #f29c9f;}
.text_blue { color: #0075a9;}

.bg_water{
	background-color: #e8f5f9 !important;
}

/* text size */
.text_12 { font-size: 1.2rem;}
.text_14{ font-size: clamp(1.3rem,1.2vw,1.4rem);}
.text_16{ font-size: clamp(1.4rem,1.54vw,1.6rem); }
.text_18{ font-size: clamp(1.6rem,1.73vw,1.8rem); }
.text_24{ font-size: clamp(1.8rem,2.308vw,2.4rem); }
.text_36 { font-size: clamp(2.3rem, 3.46vw, 3.6rem);}
.text_45 { font-size: clamp(2.5rem, 4.42vw, 4.5rem);}
.text_46 { font-size: clamp(2.6rem, 4.42vw, 4.6rem);}

/*line-height*/
.lh_12{ line-height: 1.2 !important; }
.lh_13{ line-height: 1.3 !important; }
.lh_14{ line-height: 1.4 !important; }
.lh_15{ line-height: 1.5 !important; }
.lh_16{ line-height: 1.6 !important; }
.lh_24{ line-height: 2.4 !important; }
.lh_26{ line-height: 2.6 !important; }
.lh_28{ line-height: 2.8 !important; }
.lh_30{ line-height: 3.0 !important; }
.lh_32{ line-height: 3.2 !important; }

/*letter-spacing*/
.ls_-1 { letter-spacing: -1px;}
.ls_1{ letter-spacing: 1px; }
.ls_2{ letter-spacing: 2px; }
.ls_3{ letter-spacing: 3px; }
.ls_4{ letter-spacing: 4px; }
.ls_5{ letter-spacing: 5px; }
.ls_6{ letter-spacing: 6px; }
.ls_7{ letter-spacing: 7px; }
.ls_8{ letter-spacing: 8px; }

/*z-index*/
.z_1 {	z-index: 1;}
.z_2 {	z-index: 2;}
.z_3 {	z-index: 3;}

/*----------------------------------------
	layout
----------------------------------------*/
.max680 {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.max1350 {
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
}

.large_frame{
	width: 100%;
	position: relative;
	box-sizing: border-box;
}
@media print, screen and (min-width: 1240px) {

	.large_frame{
		width: 1240px;
		padding-right: 20px;
		padding-left: 20px;
		margin-right: auto;
		margin-left: auto;
	}

}/*END*/
@media print, screen and (min-width: 769px) {
	.large_frame{
		padding-right: 3%;
		padding-left: 3%;
	}
}/*END*/
@media screen and (max-width: 768px){

	.large_frame{
		padding-right: 3%;
		padding-left: 3%;
	}

}/*END*/

@media screen and (max-width: 599px){
	.large_frame{
		padding-right: 6%;
		padding-left: 6%;
	}
}/*END*/

/*----------------------------------------
	form
----------------------------------------*/
/* .contact_form {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
	outline: none;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="tel"]{
	border: solid 1px #959595;
	border-radius: 5px;
	padding: 8px 10px;
	background: #fff;
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	font-size: 1.6rem;
}
input[type="button"]{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
    appearance: none;
	font-size: 1.6rem;
}
button,
input[type="submit"]{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	border: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font-size: 1.6rem;
	vertical-align: middle;
}
@media screen and (max-width: 768px){
	select,
	textarea,
	input[type="text"],
	input[type="search"],
	input[type="tel"]{
		padding: 8px 8px;
	}
} */

/*checkbox-radiobutton*/
/* .radio input[type="radio"],
.check input[type="checkbox"]{
	display: none;
}
.radio label,
.check label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;
	margin-right: 15px;
	padding: 12px 0 12px 20px;
	line-height: 1.2;
    font-size: 1.6rem;
}
.radio label:before,
.check label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -8px;
	width: 20px;
	height: 20px;
	margin-top: -11px;
	background: #fff;
	border: 1px solid #959595;
	border-radius: 50%;
}
.check label:before{ border-radius: 5px; }
.radio label,
.check label{
	margin-left: 0\9;
	padding: 11px\9;
}
.radio label:not(:target),
.check label:not(:target){
	margin-left: 10px\9;
	padding: 11px 0 11px 25px\9;
}
.radio label:before,
.check label:before{
	display: none\9;
}
.radio label:not(:target):before,
.check label:not(:target):before{
	display: inline-block\9;
}
.radio input[type="radio"]:checked + label:after{
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #038dbe;
}
.check input[type="checkbox"]:checked + label::after{
	content: "";
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	display: block;
}
.check input[type="checkbox"]:checked + label::after{
	left: -4px;
	width: 13px;
	height: 9px;
	margin-top: -6px;
	border-left: 3px solid #fff;
	border-bottom: 3px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.check input[type="checkbox"]:checked + label::before{
	background: #038dbe;
} */

/*box_size*/
/* .form1{ width: min(140px,100%)!important }
.form2{ width: min(200px,100%)!important }
.form3{ width: min(300px,100%)!important }
.form4{ width: min(400px,100%)!important }
.form5{ width: min(500px,100%)!important }
.form_all{ width: 100%; }
@media screen and (max-width: 499px) {
	.form1,.form2,.form3,.form4,.form5{
		width: 100%!important;
	}
} */

/*hissu nini*/
/* .hissu,
.nini{
	display: inline-block;
	line-height: 1 !important;
	padding: 6px 12px 6px 12px;
	margin-left: 15px;
	vertical-align: middle;
	border-radius: 5px;
	font-size: 1.2rem !important;
	font-weight: normal;
	box-sizing: border-box;
}
.hissu{
	color: #fff;
	background: #038dbe;
}
.nini{
    color: #898989;
    border: 1px solid #898989;
}
@media screen and (max-width: 768px){
	.hissu,
	.nini{
		padding: 6px 12px;
		margin-left: 4px;
		font-size: 1.2rem !important;
		font-weight: normal;
		vertical-align: 1px;
	}
} */

/*btn*/
/* .btn_send,.btn_back{
	background-color: #038dbe;
    box-shadow: 0px 5px 0px #0a68a4;
	width: 400px;
	max-width: 100%;
	color: #fff;
	font-size: 2.0rem!important;
	letter-spacing: 2px;
	padding: 1.6em 1.2em;
	border-radius: 5px;
	box-sizing: border-box;
	text-align: center;
	font-weight: 400;
	display: flex;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: .4s;
}
.btn_back{
	background-color: #898989;
    box-shadow: 0px 5px 0px #474747;
	width: 320px;
	padding: 1em;
	font-size: 1.4rem!important;
}
.btn_send_wrap,.btn_back_wrap {
	position: relative;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.btn_send_wrap {
	margin-top: 30px;
}
.btn_send_wrap::before{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translate(0%, -50%) rotate(45deg);
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	z-index: 5;
}
.btn_send_wrap::after{
	content: "";
	width: 35px;
	height: 2px;
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translate(0%, -50%);
	background-color: #fff;
	transition: .4s;
	z-index: 9;
}
.btn_send:hover,.btn_back:hover {
	opacity: 0.5;
}
@media screen and (max-width: 599px) {
    .btn_send_wrap,.btn_back_wrap {
        width: 100%;
    }
}

/*error*/

/*
.mw_wp_form .error{ color: inherit !important; }
.mw_wp_form span.error{
	color: #c60b0b !important;
	padding-top: 8px;
	display: block !important;
	line-height: 1.4 !important;
	clear: both;
	font-size: 1.4rem !important;
}
.privacy_error .error{
	background-color: #fed7d7;
	color: #c60b0b ;
	display: block;
}
td.error{ background: #fed7d7 !important; }
.mw_wp_form span.error{
	font-weight: bold;
}
.contact_form .privacy_check.error {
	background-color: #fed7d7;
	padding: 15px;
	font-size: inherit;
	display: table-cell;
}
.mw_wp_form_error .contact_form .kind.error {
	font-size: 100%;
	display: flex;
	flex-wrap: wrap;
}
.mw_wp_form_error .contact_form .kind.error span.error {
	flex: none;
	width: 100%;
	display: block;
} */

/* .mw_wp_form td:not(.kind) .vertical-item {
   display: inline-block;
}
.mw_wp_form .vertical-item + .vertical-item {
	margin-top: 0px!important;
}
.contact_form table {
	width: 100%;
}
.contact_form th {
	height: 50px;
	padding: 0 20px;
	text-align: left;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
}
.friend_form01 th {
    background-color: #fef5f5;
}
.friend_form02 th {
    background-color: #e8f5f9;
}
.contact_form td {
	padding: 20px 20px 40px;
}
@media screen and (max-width: 499px) {
	.contact_form th {
		padding: 0 8px ;
	}
	.contact_form td {
		padding: 20px 8px 40px;
	}
} */

/* privacy */
/* .privacy_text {
    background-color: #f6f6f6;
    padding: 20px;
    box-sizing: border-box;
    height: 200px;
    overflow: auto;
}

.radio_wrap .wpcf7-list-item {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
}
.radio_wrap label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    font-size: 1.6rem;
} */

/* ラジオ・チェックボックスのレイアウト */
.wpcf7-form-control:has(input[type="checkbox"],input[type="radio"]):not(:has([name="privacy"])){
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 0.5em;
}
.wpcf7-form-control.vertical{
    grid-template-columns: auto!important;
}

@media screen and (max-width: 599px) {
    .wpcf7-form-control:has(input[type="checkbox"],input[type="radio"]):not(:has([name="privacy"])){
        grid-template-columns: 1fr;
    }
}

/* リストアイテムの設定（基準位置にする） */
.wpcf7-list-item {
    margin: inherit;
    padding: 0.5em 0;
    position: relative; /* 重要：ここを基準にする */
    display: inline-block;
}

/* ラベルの余白（アイコンの分） */
.wpcf7-list-item-label {
    padding-left: 2.5em;
    position: relative;
    line-height: 1.5;
    display: inline-block;
    width: 100%;
    cursor: pointer; /* マウスカーソルを指にする */
}

/* 本来のinputタグ：透明にして前面に広げる（確実にクリックさせるため） */
.wpcf7-form-control input[type="radio"],
.wpcf7-form-control input[type="checkbox"] {
    opacity: 0;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* クリック範囲を広げる */
    height: 100%;
    z-index: 10; /* 最前面に配置 */
    cursor: pointer;
    margin: 0;
}

/* --- デザインの描画（四角や丸の枠） --- */
/* 記号を ~ に変更して、改行が入っても効くように修正 */
.wpcf7-form-control input[type="checkbox"] ~ .wpcf7-list-item-label::before,
.wpcf7-form-control input[type="radio"] ~ .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    background: #fff;
    border: 1px solid #bebbb0;
    z-index: 1; /* inputより奥、文字より奥 */
}

/* チェックボックスの枠 */
.wpcf7-form-control input[type="checkbox"] ~ .wpcf7-list-item-label::before {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}
/* ラジオボタンの枠 */
.wpcf7-form-control input[type="radio"] ~ .wpcf7-list-item-label::before {
    width: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

/* --- チェック時の動作 --- */

/* チェックされた時の青い背景 */
.wpcf7-form-control input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before,
.wpcf7-form-control input[type="radio"]:checked ~ .wpcf7-list-item-label::before {
    background-color: #469ed7;
}

/* チェックマーク・白い点の共通設定 */
.wpcf7-form-control input[type="radio"]:checked ~ .wpcf7-list-item-label::after,
.wpcf7-form-control input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none; /* クリックを邪魔しない */
}

/* チェックボックスのレ点 */
.wpcf7-form-control input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after {
    left: 6px;
    top: 3px;
    width: 4px;
    height: 9px;
    transform: rotate(40deg);
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
}

/* ラジオボタンの白い点 */
.wpcf7-form-control input[type="radio"]:checked ~ .wpcf7-list-item-label::after {
    left: 6px; /* 位置微調整 */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    top: 6px; /* 位置微調整 */
}
/*----------------------------------------
    mv
----------------------------------------*/
.mv_ttl {
    position: absolute;
    height: 100%;
    padding: 40px;
    max-width: 1220px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
}
.mv_ttl img {
    display: block;
    margin-left: auto;
    width: auto;
    height: 100%;
    max-height: 463px;
}
@media screen and (min-width: 1800px) {
    .mv_ttl img {
        margin-right: auto;
    }
}
@media screen and (max-width: 768px) {
    .mv_ttl {
        position: relative;
        height: auto;
        padding: 10px;
        top: 0%;
        left: 0%;
        transform: translate(0%, 0%);
        background: rgba(256, 256, 256, 0.8);
    }
    .friend_mv_frame {
        background-image: url(../images/friend_introduction/friend_mv_bg.jpg);
        background-size: cover;
        background-position: 10%;
        padding: 12vh 10px 20vh;
    }
    .mv_bg {
        display: none;
    }
}
/*----------------------------------------
    present
----------------------------------------*/
.bg_present {
    background-color: #fef5f5;
}
.present_flex01 {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
.present_item_and {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    max-width: 17vw;
}
.present_flex02 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 599px) {
    .present_flex01 {
        flex-direction: column;
    }
    /* .present_flex01 > div:nth-child(2) {
        margin-left: -8%;
    } */
    /* .present_flex01 > div:nth-child(3) {
        margin-right: -8%;
    } */
    .present_flex02 {
        flex-direction: column;
        grid-area: 20px;
    }
}
/*----------------------------------------
    owners
----------------------------------------*/
.owners_img_list {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    justify-items: center;
    gap: 5px;
}
.w90{
	width: 90%;
	margin-inline: auto;
}

@media screen and (max-width: 500px) {
	.owners_img_list {
    grid-template-columns: repeat(2,1fr);
}
}
/*----------------------------------------
    ranking
----------------------------------------*/
.ranking_deco01 {
    position: absolute;
    bottom: 0%;
    left: 0%;
    max-width: 380px;
    width: 28.14%;
    z-index: 0;
}
.ranking_deco02 {
    position: absolute;
    bottom: 0%;
    right: 0%;
    max-width: 380px;
    width: 28.14%;
    z-index: 0;
}
.ranking_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ranking_ttl_deco01 {
    width: 30px;
}
.ranking_ttl_deco02,.ranking_ttl_deco03 {
    max-width: 6vw;
}
@media screen and (max-width: 768px) {
    .ranking_deco01 {
        position: relative;
        display: inline-block;
        width: 48%;
    }
    .ranking_deco02 {
        position: relative;
        display: inline-block;
        width: 48%;
    }
}
/*----------------------------------------
    strengths
----------------------------------------*/
.strengths_ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.strengths_item {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: #e8f5f9;
    padding: 30px 50px;
    box-sizing: border-box;
}
.strengths_circle {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translate(-25%, -40%);
}
.strengths_img {
    max-width: 400px;
    position: relative;
}
.strengths_txt {
    max-width: 500px;
}
@media screen and (max-width: 768px) {
    .strengths_item {
        flex-direction: column;
        padding: 30px 15px;
    }
    .strengths_img,.strengths_txt {
        width: 100%;
        max-width: 100%;
    }
}

/*----------------------------------------
    flow
----------------------------------------*/
.bg_flow {
    background-color: #e8f5f9;
}
.flow_item {
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    gap: 50px;
    align-items: center;
    min-height: 156px;
}
.flow_item_no {
    width: 110px;
}
.flow_arrow {
    margin-left: 25px;
    width: 110px;
    text-align: center;
    margin-top: -10px;
    margin-bottom: -10px;
}
@media screen and (max-width: 768px) {
    .flow_item {
        flex-direction: column;
        gap: 10px;
    }
    .flow_arrow {
        margin-left: auto;
        margin-right: auto;
    }
    .flow_item_no {
        max-width: 25%;
    }
}