@charset "UTF-8";


/* スマホ 分岐
-------------------------------------------------*/

/* PCサイズ */

.pc{display: none;}
.sp{display: block;}

.baseBox{
    margin: auto;
    width: 100%;
}

.width100auto{
	width: 100%;
}


/* ヘッダー
-------------------------------------------------*/

header{
    width: 100%;
	padding: 1em;
}

header > div{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	align-items: center;
}

header > div > div:nth-child(1){
	width: 300px;
}

header > div > div > ul{
	display: none;
}

ul#headerlink  li{
	margin: 0 0.25em;
}

header a{
	font-size: 100%;
	color: #000;
	font-weight: 700;
	text-decoration: none;
}

header a:hover{
	color: #eb6100;
	transition: 0.5s;
}

#header2,
header > h1{
	display: none;
}

header img{
	width: 100%;
}

#mv {
    display: block;
    /* 背景画像の設定 */
    background-image: url("./images/mv_bg.jpg");
    
    /* 画像を中央に配置 */
    background-position: center;
    
    /* 画像を繰り返さない */
    background-repeat: no-repeat;
    
    /* 【重要】横幅いっぱいに広げ、縦横比を保ったままエリア全体を覆う（可変サイズ） */
    background-size: cover;
    
    /* 横幅は100%（または親要素に合わせる） */
    width: 100%;
    
    /* 縦幅の基準（必要に応じて調整してください） */
    /* 例：スマートフォンの画面の高さに合わせる場合は 100vh、固定なら 500px など */
}

.baseColorBox{
    padding: 1em 0;
    background: #004e9f;
    color: #FFF;
}

.baseColorBox p{
    font-size: 20px;
    line-height: 180%;
}

.baseColorBox p > span{
    color: #ffe103;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0.1em;
}

#topSection > div{
	padding: 50px 0 1em 0;
}

#topSection > div:first-child{

}

#topSection > div:nth-child(odd){
	background: #EDEDED;
}

#topSection > div:nth-child(even){
	background: #FFFFFF;
}

#nayamiSection{
	background: #eae1cb !important;
}

#topSection p{
	font-weight: 700;
	text-align: center;
}

/*	書体マーカー
------------------------------------------------------*/
p.marker {
	margin: 1em 0;
}

p.marker > span {
	color: #004e9f;
	font-size: 180%;
	font-weight: 700;
	background:linear-gradient(transparent 60%, #fcff00 60%);
}

/*	書体サイズ
------------------------------------------------------*/
.font120{
    font-size: 120%;
}

.font150{
    font-size: 150%;
}

.font180{
    font-size: 160%;
}

.font200{
    font-size: 200%;
}

.font240{
    font-size: 240%;
}

.font280{
    font-size: 280%;
}

.font320{
    font-size: 320%;
}

.font360{
    font-size: 360%;
}


#meritflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	padding: 1em 0 1em 0;
	margin-bottom: 1em;

}
#meritflex > div{
	width: 100%; /* 画面幅を正確に3等分 */
	padding: 1em;
	box-sizing: border-box;
}

/* 汎用メッセージボックス
-------------------------------------------------*/
.message {
    gap: 20px;
	margin: 1em;
    box-sizing: border-box;
    padding: 1em;
    background: #fff8dc;
	box-sizing: border-box;
    border-radius: 10px;
}

.message__icon {
    display: none;
}

.message__title {
    flex: 1;
    color: #003b8f;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
    font-size: 2.0rem;
	text-align: center;
	font-weight: 900;
    line-height: 1.4;
	margin-bottom: 0.7em;
}

.message__text {
    display: block;
    color: #000;
    font-size: 110%;

    line-height: 180%;
}


/* メリットカードの暫定
-------------------------------------------------*/
.merit-card {
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.merit-card img{
	width: 100%;
}

/* 上部の青帯 */
.merit-card__head {
    display: flex;
    align-items: center;
	justify-content: center;
    min-height: 60px;
    padding: 0 1em;
    background: #12388f;
    color: #fff;
}

/* タイトル */
.merit-card__head h3 {
	text-align: center;
	font-size: 20px;
    margin: 0;
    font-weight: 700;
    letter-spacing: .03em;
}

.merit-card__head h3 span {
    color: #ffd800;
}

/* 本文 */
.merit-card__body figure{
	margin-bottom: 1em;
}

.merit-card__lead {
    margin: 1em 0.5em 1.5em 0.5em;
    text-align: center;
    font-size: 120%;
	line-height: 180%;
    font-weight: 700;
}

.merit-card__lead span {
    color: #ee5b30;
}

/* 下段 */
.merit-card__content {
	padding: 0.5em 1em;
}

/* チェック項目 */
.merit-list {
    margin: 0;
    padding: 10px 25px 20px 40px;
    list-style: none;
}

.merit-list li {
    position: relative;
    padding: 20px 0 18px 44px;
    border-bottom: 1px dotted #b7c9df;
    font-size: 120%;
    font-weight: 700;
	text-align: left;
}

.merit-list li:last-child {
    border-bottom: 0;
}

/* チェックアイコン */
.merit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border: 3px solid #2363b7;
    border-radius: 50%;
    color: #2363b7;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* 写真 */
.merit-card__image {
    overflow: hidden;
}

.merit-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    object-position: center;
}


/* 各種アイテムコース暫定
-------------------------------------------------*/
.item-card {
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.item-card img{
	width: 100%;
}

/* 上部の青帯 */
.item-card__head {
    display: flex;
    align-items: center;
	justify-content: center;
    min-height: 60px;
    padding: 0 1em;
    background: #12388f;
    color: #fff;
}

/* タイトル */
.item-card__head h3 {
	text-align: center;
	font-size: 20px;
    margin: 0;
    font-weight: 700;
    letter-spacing: .03em;
}

.item-card__head h3 span {
    color: #ffd800;
}

/* 本文 */
.item-card__body {}

.item-card__lead {
    margin: 1em 0.5em;
    text-align: center;
    font-size: 120%;
    font-weight: 700;
}

.item-card__lead span {
    color: #ee5b30;
}

/* 下段 */
.item-card__content {
	padding: 0.5em 1em;
}

/* チェック項目 */
.item-list {
    margin: 0;
    padding: 10px 25px 20px 40px;
    list-style: none;
}

.item-list li {
    position: relative;
    padding: 20px 0 18px 44px;
    border-bottom: 1px dotted #b7c9df;
    font-size: 120%;
    font-weight: 700;
	text-align: left;
}

.item-list li:last-child {
    border-bottom: 0;
}

/* チェックアイコン */
.item-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border: 3px solid #2363b7;
    border-radius: 50%;
    color: #2363b7;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* 写真 */
.item-card__image {
    overflow: hidden;
}

.item-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    object-position: center;
}

/* 理由カードの暫定
-------------------------------------------------*/
#reasonflex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1em;
    margin-bottom: 2em;
	margin-top: 1em;
}

#reasonflex > div {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
}

#reasonflex > div > div {
    width: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    border: #003b8f solid 1px;
    padding: 0.5em 0.5em 0.75em  0.5em;
    box-sizing: border-box;
}

#reasonflex > div > div > figure {
    flex: 0 0 auto;
    width: 60px;
}

#reasonflex > div > div >  dl{
	margin: 0 0 0 0.5em;
	padding: 0;
}

#reasonflex dt{
	text-align: left;
	font-size: 100%;
	color: #003b8f;
	font-weight: 700;
	margin: 0 0 0.25em 0 ;
	padding: 0;
}

#reasonflex dd{
	text-align: left;
	font-size: 14px;
	line-height: 160%;
	margin: 0;
	padding: 0;
}

#reasonflex img{
	width: 100%;
}

/* よくある質問
-------------------------------------------------*/

#faqSection {
	padding: 1em;
}

.faq-title {
	margin-bottom: 40px;
}

.faq-title__en {
	color: #003b8f;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.4;
}

#faqSection .faq-title h2 {
	margin: 0 0 10px;
	padding: 0;
	color: #003b8f;
	font-size: 36px;
	font-weight: 900;
	line-height: 1.4;
}

#faqSection .faq-title > p:last-child {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
}


/* FAQ一覧 */
.faq-list {
	width: 100%;
	padding: 1em;
	max-width: 100%;
}


/* 1項目 */
.faq-item {
	margin-bottom: 2em;
	background: #fff;
	border: 1px solid #d4dce8;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}


/* 質問 */
.faq-question {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 20px 65px 20px 20px;

	background: #fff;
	border: 0;

	color: #003b8f;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;

	text-align: left;
	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
}

.faq-question:hover {
	background: #f5f8fc;
}


/* Q */
.faq-q {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;

	width: 38px;
	height: 38px;
	margin-right: 15px;

	background: #003b8f;
	border-radius: 50%;

	color: #fff;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}


/* 質問本文 */
.faq-question__text {
	flex: 1;
}


/* ＋マーク */
.faq-toggle {
	position: absolute;
	top: 50%;
	right: 22px;

	width: 22px;
	height: 22px;

	transform: translateY(-50%);
}

.faq-toggle::before,
.faq-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;

	width: 20px;
	height: 2px;

	background: #003b8f;
	border-radius: 2px;

	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

.faq-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}


/* 開いた時 */
.faq-item.is-open .faq-toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}


/* 回答 */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr;

	background: #f7f9fc;

	transition: grid-template-rows 0.35s ease;
}

.faq-item.is-open .faq-answer {
	grid-template-rows: 1fr;
}

.faq-answer__inner {
	display: flex;
	align-items: flex-start;

	min-height: 0;
	overflow: hidden;

	padding: 0 25px;
}

.faq-item.is-open .faq-answer__inner {
	padding-top: 20px;
	padding-bottom: 22px;
}


/* A */
.faq-a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;

	width: 38px;
	height: 38px;
	margin-right: 15px;

	border: 2px solid #003b8f;
	border-radius: 50%;

	color: #003b8f;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}

#faqSection .faq-answer p {
	flex: 1;
	margin: 2px 0 0;
	padding: 0;

	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	text-align: left;
}

/* ポイントエリア
-------------------------------------------------*/
#pointArea{
	width: 100%;
	margin: 0 auto;

    gap: 1em;
	padding: 1em;
}

#pointArea > div{
	width: 100%;
    display: flex;
    align-items: flex-start;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
    padding: 0.5em 0.85em 0.75em 0.85em;
    box-sizing: border-box;
	margin-bottom: 1em;
}

#pointArea img{
	width: 100%;
}

#pointArea figure{
	flex: 0 0 auto;
    width: 75px;
	margin-top: 0.5em;
}


#pointArea > div:nth-child(1){
	border: #003b8f solid 2px;
	background: #f5f9fc;
}

#pointArea > div:nth-child(2){
	border: #077d2d solid 2px;
	background: #f7f9f5;
}


#pointArea > div:nth-child(3){
	border: #f96f04 solid 2px;
	background: #fdf9f3;
}

#pointArea > div > dl{
	margin: 0 0 0 1em;
}
#pointArea > div > dl >dt{
	margin: 0;
	padding: 0;
	font-size: 180%;
	line-height: 180%;
	font-weight: 700;
}

#pointArea > div > dl >dd{
	font-size: 14px;
	line-height: 180%;
}

#pointArea > div:nth-child(1) > dl >dt{
	color: #003b8f;
}


#pointArea > div:nth-child(2) > dl >dt{
	color: #077d2d;
}


#pointArea > div:nth-child(3) > dl >dt{
	color: #f96f04;
}



/* お問い合わせ
-------------------------------------------------*/

#inquirySection {
	padding: 100px 0;
}


/* 見出し */
.inquiry-title {
	margin-bottom: 40px;
}

.inquiry-title__en {
	color: #003b8f;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.4;
}

#inquirySection .inquiry-title h2 {
	margin: 0 0 20px;
	color: #003b8f;
	font-size: 36px;
	font-weight: 900;
	line-height: 1.5;
}

#inquirySection .inquiry-lead {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
}
#inquiry-title span{
	display: none;
}


/* お問い合わせの流れ */
.inquiry-guide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto 40px;
	padding: 1em;
}

.inquiry-guide__item {
	width: 220px;
	padding: 18px 15px;

	background: #fff;
	border: 1px solid #d4dce8;
	border-radius: 8px;

	text-align: center;

	box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.inquiry-guide__number {
	display: block;
	margin-bottom: 5px;

	color: #003b8f;
	font-size: 14px;
	font-weight: 900;
	line-height: 1.4;
}

#inquirySection .inquiry-guide__item p {
	margin: 0;
	color: #003b8f;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.inquiry-guide__arrow {
	padding: 0 18px;

	color: #003b8f;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}


/* フォームエリア */
.inquiry-form {
	width: 900px;
	max-width: 100%;
	margin: 0 auto;

	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);

	padding: 40px;
}


/* メルサク設置前のみ使用 */
.inquiry-form__placeholder {
	padding: 80px 20px;

	border: 2px dashed #b8c5d6;
	border-radius: 6px;

	color: #777;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

/* 汎用電話番号デザイン
-------------------------------------------------*/
.toiawaseBox{
	border: 10px #eae2dd solid;
	background: #FFFFFF;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 1em;
	width: 92%;
	margin: 1.5em 4%;
	font-family: 'Noto Sans JP', sans-serif;
}

.toiawaseBox > div{
	width: 100%;
	padding: 0em;
}

.toiawaseBox dt,
.toiawaseBox dd{
	text-align: left;
}

.toiawaseBox dt{
	margin-bottom: 0.5em;
}

.toiawaseBox dd{
	font-size: 90%;
	margin-bottom: 1em;
}

.toiawaseBox a{
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	font-size: 110%;
	padding: 0.5em;
	font-size: 700;
	font-family: 'Noto Sans JP', sans-serif;
	margin-bottom: 1em;
}

.phoneN{
	background: #1d8825;
	background-size: 50px;
    border-radius: 5px;
}

.mailN{
	background: #ea6100;
	background-size: 50px;
    border-radius: 5px;
}


.lineN{
		background: #00940a;
		background-size: 50px;
		border-radius: 5px;
		margin: 0;
}

.phoneN:hover,
.mailN:hover,
.lineN:hover{
	opacity: 0.7;
	transition: 0.5s;
}