@charset "utf-8";

body { font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding-bottom: 7rem;}

.minchou { font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }

.yugo { font-family: YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif; }

@media screen and (min-width: 768px) { #wrapper { 	width: 640px; 	background: #fff; 	margin: 0 auto; 	transform: scale(1); }

	html { 	font-size: 20px; }
}

/*----------------------------------------------------------
	header
----------------------------------------------------------*/
/* 2207テスト ヘッダーメニュー*/
#header .header_inner { position: fixed; width: 640px; min-height: 5rem; padding: 0 1rem; color: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #233346), color-stop(0.00, #3b4f68)); background: -webkit-linear-gradient(#3b4f68, #233346); background: -moz-linear-gradient(#3b4f68, #233346); background: -o-linear-gradient(#3b4f68, #233346); background: -ms-linear-gradient(#3b4f68, #233346); background: linear-gradient(#3b4f68, #233346); z-index: 9993; }

.header_logo { float: left; width: 15rem; margin: 1rem 0 0; }

/* ヘッダー開いたときのoverflow */
#wrapper.hidden { height: 100vh; overflow: hidden; }

#container { margin-top: 5rem; }

/*==============================================================================
	footer style
============================================================================= */
footer { /* padding: .3rem 0 13rem; */
	padding: 1rem 0 1rem; background: #4a617d; color: #fff; font-size: 1.1rem; text-align: center; }

.cv-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #f2edd5; z-index: 9999; }
.cv-btns { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; margin: 0; list-style: none; }
.cv-btns .cv-line, .cv-btns .cv-mail { width: 7.3rem; height: auto; }
.cv-btns .cv-tel { width: 15.5rem; height: auto; }

/*----------------------------------------------------------
	modal
----------------------------------------------------------*/
#modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 1000000; }

.modal-item { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 30rem; height: 70%; margin: auto; z-index: 1000001; }

.modal-close { width: 3rem; height: 3rem; position: absolute; top: -3.5rem; right: 0; cursor: pointer; }

.modal-close .close-btn { width: 100%; height: 100%; transform: rotate(45deg); }

.modal-close .close-btn span { background: #fff; position: absolute; }

.modal-close .close-btn span:nth-child(1) { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }

.modal-close .close-btn span:nth-child(2) { width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }

/* 電話モーダル */
.modal-list.modal02 .modal-item { height: 40.5rem; padding: 6.25rem 0 0; background: #fff; }

.modal-list.modal02 .modal-close { width: 4.15rem; height: 4.15rem; }

.modal-list.modal02 .txt01 { margin-bottom: 1rem; color: #333333; font-size: 1.4rem; letter-spacing: .02em; text-align: center; }

.modal-list.modal02 .txt01 .em { font-size: 1.6rem; }

.modal-list.modal02 .txt02 { margin: 2.6rem auto 1rem; color: #333333; font-size: 1.3rem; letter-spacing: .02em; text-align: center; }

.modal-list.modal02 .txt02::after { display: block; content: ""; width: 26rem; height: .1rem; margin: .5rem auto 0; background-image: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent); background-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent); }

.modal-list.modal02 .btn,
.modal-list.modal02 .sub { width: 28rem; margin: 0 auto; }

.modal-list.modal02 .modal-close { top: 0; background-color: #7d8b9c; }

.modal-list.modal02 .txt03 { display: flex; justify-content: center; align-items: center; width: 18.7rem; height: 3.75rem; margin: 3.05rem auto 0; font-size: 1.3rem; border: solid #000 .05rem; background-color: #dfdede; cursor: pointer; }

/*==============================================================================
	survey
============================================================================= */
/* スクロール対象の要素にだけオフセットを持たせる */
.questionnaire .questionnaire-bg {background: #f1f1f1; padding-bottom: 5.15rem; padding-top: 3rem;}
.questionnaire .questionnaire-bg.active { background: #f1f1f1; padding-top: 3rem; }
.questionnaire .questionnaire-inner { padding: 0 1rem; }
.questionnaire .section-title { text-align: center; }
.questionnaire .section-title .big { display: inline-block; font-size: 2.7rem; letter-spacing: .04em; font-weight: bold; color: #0b2d57; margin-top: 0.5rem; }
.questionnaire .section-title .balloon { display: inline-block; font-size: 1.7rem; letter-spacing: .04em; color: #fff; background: #2e4b6e; border-radius: 100vmax; padding: 0.6rem 0; width: 27.5rem; margin: 0 auto; line-height: 1; }
.questionnaire .section-title .balloon .color { color: #fff683; }
.questionnaire .section-title .balloon .num { display: inline-block; margin-top: -0.9rem; transform: translateY(0.3rem); font-size: 2.7rem; }
.questionnaire .que { position: relative; font-size: 1.2rem; padding: 5.6rem 1rem 6.2rem; margin-top: 4.9rem; text-align: center; background: #fff; }
.questionnaire .que .num { position: absolute; top: -1.5rem; left: 0; right: 0; margin: 0 auto; width: 3.7rem; }
.questionnaire .que .num02 { position: absolute; top: -1.5rem; left: 0; right: 0; margin: 0 auto; width: 3.8rem; }
.questionnaire .que .num03 { position: absolute; top: -1.5rem; left: 0; right: 0; margin: 0 auto; width: 3.8rem; }
.questionnaire .que .item { position: absolute; top: -1.55rem; right: 1rem; width: 5.8rem; }
.questionnaire .que .balloon,.questionnaire .cv .balloon  { display: flex; align-items: end; justify-content: space-between; gap: 0.5rem; margin-left: -0.5rem; }
.questionnaire .que .balloon .img01,.questionnaire .cv .balloon .img01 { width: 7.5rem; }
.questionnaire .que .balloon .txt01,.questionnaire .cv .balloon .txt01 { position: relative; font-size: 1.5rem; background: #e7f2ff; width: 22rem; padding: 0.9rem 0 0.9rem 1.5rem; border-radius: 10px; color: #333333; font-weight: bold; letter-spacing: .02em; line-height: 1.53; }
.questionnaire .que .balloon .txt01::before,.questionnaire .cv .balloon .txt01::before { content: ""; position: absolute; bottom: 0; left: -1rem; width: 0; height: 0; border-style: solid; border-width: 0 0 1.5rem 1.5rem; border-color: transparent transparent #e7f2ff transparent; }
.questionnaire .question, .cv { display: none; }
.questionnaire .answers { display: flex; align-items: center; justify-content: center; gap: 0 1rem; margin: 3.05rem auto; }
.question.visible, .cv.visible { display: block; }
.questionnaire button { position: relative; display: block; padding: 0.77rem 0; font-size: 1.5rem; letter-spacing: .04em; text-align: center; font-weight: bold; cursor: pointer; width: 12rem; color: #2e4b6e; background: #fff; border: #2e4b6e solid 2px; box-shadow: 0 0.3rem 0 #2e4b6e, 0 -0.3rem 0 #fff; border-radius: 8px; }
.questionnaire button::before { content: ""; position: absolute; top: 1.1rem; right: 1rem; width: 0.7rem; height: 1.1rem; background: url(../img/que-arrow.png) no-repeat center/cover; }
.questionnaire .cv { position: relative; font-size: 1.2rem; padding: 2.2rem 1rem 2.6rem; margin: 5.15rem auto 0; text-align: center; background: #fff;}
.questionnaire .cv .line-btn { width: 27.9rem; margin: 1.93rem auto 0; }
.questionnaire .cv .tel_btn { width: 27.9rem; margin: 1.93rem auto 0;}