@charset "utf-8";
body{
	font-size: 17px;
    line-height: 1.5em;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
    overflow-wrap: break-word;
	word-break: normal;
	color: #333;
	font-feature-settings: "palt";
	font-optical-sizing: auto;
	overflow-x: hidden;
}
:root {
	--maincolor: #0a3637;
	--subcolor: #f8f0d9;
	--bgcolor: #e1f2f0;
	--redcolor: #d31b4c;
	--yecolor: #d9cb51;

	--serif: 'Shippori Mincho', serif;
	--italic: "Lugrasimo", cursive;

	--shadow: drop-shadow(2px 2px 10px hsla(0, 0%, 0%, 0.2));

	--_radius-base: 13px;
	--_padding: 8px;
	--_radius-inner: calc(var(--_radius-base) - var(--_padding));
}
::selection {
	background: var(--maincolor);
	color: #FFF;
}
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background: #eee;}
::-webkit-scrollbar-thumb {background: var(--maincolor);}

/******共通******/
.sp{display: none!important;}
img{width:auto; height: auto;max-width:100%;}
p{line-height: 1.7em; margin-bottom: 1.7em;}

.right{
  width: 300px;
  display: block;
  float: right;
  padding: 0 1%;
}
.img_b{
	text-align: center;
	margin: 0 auto 1.7em auto;
	display: block;
	display: block;
}

.refl{
	-webkit-box-reflect: below 2px -webkit-gradient(linear, left bottom, left 90%, from(rgba(255, 255, 255, 0.3)), to(transparent));
	margin-bottom: 2em;
}

.btn{
	margin: 5% auto 0 auto;
	text-align: center;
}
.btn img{transition: all .5s;}
.btn img:hover{transform: translateY(-10px);}

:is(p,.img_b,.btn,.box):last-child{margin-bottom: 0;}

/***テキスト***/
.big{font-size: 1.3em;}
.small{font-size: .8em;}
.b{font-weight: 800;}
.u{text-decoration:underline;}
.red{color: var(--redcolor);}
.ye{color: #ffed48;}
.ita{font-family: var(--italic);}


/*追従*/
.cont{
  width: 170px;
  height: auto;
  position:fixed;
  bottom :5px;
  right: 5px;
  z-index: 1000;
  transition: opacity 0.3s;
}

/************
header
************/
header{
	text-align: center;
    padding: 0;
    overflow: hidden;
    position: relative;
	min-height: 580px;
    height:85vh;
    margin: 0 auto;
}
header .video_hero-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
    min-height: 100%;
    min-width: 100%;
    max-width: 3000px;
    z-index: 0;
}
header h1{
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	width: 100%;
}

.fade-img {
	opacity: 0;
	transition: opacity 1s;
	position: relative;
}

.head_img_b{
	position: absolute;
	bottom: 50px;
	right: 10%;
}

/************
main
************/
.bg{background: var(--bgcolor);}
.bg_g{
	background: #0B2F30;
	background: linear-gradient(180deg, rgba(11, 47, 48, 1) 0%, rgba(84, 107, 91, 1) 70%, rgba(255, 247, 191, 1) 100%)no-repeat;
}
.wrap{
	max-width: 900px;
	margin: 0 auto;
	padding: 3% 2%;
}

.main{
	padding: 3% 2%;
	background: #0B2F30;
	background: url(../img/form_b.png),linear-gradient(180deg, rgba(11, 47, 48, 1) 40%, rgba(84, 107, 91, 1) 75%, rgba(255, 247, 191, 1) 100%);
	background-blend-mode: screen;
	background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
	
}

/************/
h2,h3{
	text-align: center;
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1.4em;
	font-family: var(--serif);
	margin: 1em auto .8em auto;
	color: var(--maincolor);
}
.bg_g h2{color: #fff;}
h2::after {
	content: url(../img/h2_b.png);
	display: block;
	margin-top: .4em;
}
h3{
	font-size: 1.6em;
	color: #0a4656;
}
h3 span{font-size: .9em;}
h5{
	font-size: 1.3em;
	font-weight: 600;
	margin-bottom: .8em;
}

:is(h2,h3):first-child{margin-top: 0;}


/*******
リスト
*******/
ul:not([class],:last-child),ul.notes:not(:last-child){margin-bottom: 1.5em;}
ul:not([class]) li{
    position: relative;
    padding-left: 1.3em;
	margin-bottom: .3em;
}
ul:not([class]) li:before{
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block;
    position: absolute;
    left: 5px;
    top: 10px;
    content: "";
	background: var(--maincolor);
}

/***/
.list ul li{
    margin-bottom: .8em;
    position: relative;
    padding-left: 32px;
    display: flex;
    /* align-items: center; */
	font-size: 1.2em;
	font-weight: 600;
	font-family: var(--serif);
}
.list ul li::before{
	content: url(../img/li_icon.png);
    position: absolute;
    left: 0;
}

/***/
ul.notes li {
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: .2em;
	line-height: 1.5em;
	font-size: .9em;
}
ul.notes li::before {content: "※";}

.box{
	background: #fff;
	padding: 3%;
	margin-bottom: 1.3em;
	box-sizing: border-box;
}

/************/
dl{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	gap : 10px;
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 1em;
}
dl dt {
	width: calc(30% - 10px);
	font-size: 1.1em;
	margin-bottom: 0;
	background: var(--maincolor);
	background: linear-gradient(90deg, rgba(11, 47, 48, 1) 0%, rgba(57, 131, 141, 1) 95%);
	color: #fff;
	border-radius: 500px;
	text-align: center;
	padding: .3em .7em;
	box-sizing: border-box;
	font-family: var(--serif);
	letter-spacing: .1em;
}
dl dd {
    width: 69%;
    font-weight: 600;
	margin-bottom: 0;
}

/************/
.tktn{background: var(--subcolor)}
.tktn .box,.tktn_box{
	filter: var(--shadow);
	border: solid 1px #dbc070;
	box-shadow: 0 0 0 10px #fff;
	margin-bottom: 2em;
}
.tktn_bg{
	background: url(../img/tktn_bg.png),#fff;
	background-size: auto 800px;
	background-position: center;
	background-repeat: no-repeat;
}
.tktn .box{
	position: relative;
	margin-top: 50px;
	padding-top: 80px;
}
.tktn .box .num{
	position: absolute;
	top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.tktn .box p{
	text-align: center;
	font-size: 1.1em;
}

/******
プロフィール
******/
.prof:not(.prof:last-child){margin-bottom: 1.3em;}
.prof .prof_img{height: 150px;}
.prof .index{
	display: flex;
	gap: 50px;
    align-items: center;
	margin-bottom: 1.7em;
}
.prof .index img{filter: drop-shadow(10px 10px 0 var(--maincolor));}
.prof .index h4{
    font-size: 1.6em;
	letter-spacing: .1em;
	margin-bottom: .5em;
	font-family: var(--serif);
	color: var(--maincolor);
	line-height: 1.4em;
}
.prof .index h4 span{font-size: .8em;}

/***/
.msg{
	font-family: var(--serif);
    background: var(--subcolor);
	background-attachment: fixed;
    padding: 3%;
	color: var(--maincolor);
}

.msg .r_name{
	font-family:var(--italic) ;
	text-align: right;
}
.msg .r_name::after{content: none;}

/***********/
.ss{
	background: rgba(26, 74, 64, 0.5);
	border: solid 1px #fff;
	color: #fff;
}

.ss h4{
	text-align: center;
	border-bottom: solid 1px #fff;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	font-size: 1.4em;
	line-height: 1.4em;
}
.ss h4 span{
	font-family: var(--italic);
	color: var(--yecolor);
}

/******/
.feature_flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 900px;
	margin-bottom: 1em;
}
.feature_flex:nth-child(even){flex-direction: row-reverse;}
.column{width: 48%;}
.feature_img{
    flex: 1;
    margin-left: calc(50% - 50vw);
    margin-right: 4%;
	border-radius: 0 500px 500px 0;
	filter: drop-shadow(2px 2px 10px #ccc);
}
.feature_flex:nth-child(even) .feature_img{
    margin-right: calc(50% - 50vw);
    margin-left: 2%;
	border-radius: 500px 0 0 500px;
}

/************
form
************/
.form{padding: 3% 2%;}
form{
	background: rgba(255, 255, 255, 0.9);
	padding: 3%;
	max-width: 750px;
	margin: 0 auto;
}
.form-mail p{
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 1%;
}
form p{
	margin: 0 auto;
	text-align: center;
	line-height: 1.5em;
	margin-top: 1%;
}
.label{width: 140px;}
.form-item {
    padding-bottom: 2%;
    width: 95%;
    display: flex;
    align-items: center;
	margin: 0 auto;
	gap: 15px;
}
.input {
    border: 2px solid #d7d7d7;
    padding: 0 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 530px;
	border-radius: 5px;
}

.form_btn{
	display: block;
	margin: 2% auto 3% auto;
	-webkit-animation: anime_pulse 1.5s infinite;
	animation: anime_pulse 1.5s infinite;
	border-radius: 5px;
}
/*アニメーション*/
@-webkit-keyframes anime_pulse {
	0% { -webkit-transform: scale(0.95);
	transform: scale(0.95); }
	70% { -webkit-transform: scale(1);
	transform: scale(1) }
	100% { -webkit-transform: scale(0.95);
	transform: scale(0.95);}
}

.flash{
    -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.rule{
	background: #fff;
	padding: 3%;
	overflow-y: scroll;
	height: 100px;
	margin-top: 3%;
	font-size: .8em;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
}
.rule a{color: var(--redcolor);}

/*タイマー*/
.timer{
	text-align: center;
	padding: 1% 2%;
	font-family: var(--serif);
	font-size: 1.2em;
	font-weight: 800;
	filter: var(--shadow);
	margin: 1em auto 2em auto;
}
.timer:last-child{margin-bottom: 0;}
.timer p{margin-bottom: 0;}
.counter span{
	font-size: 1.4em;
	padding: .3em .3em;
	margin: 0 .2em;
	border-radius: 5px;
	background: var(--maincolor);
	color: #fff;
}

/*footer*/
footer{
	background: var(--maincolor);
	padding: 30px 2%;
	text-align:center;
	font-size:14px;
}
footer p{
    line-height: 1em;
	color:#fff;
}
footer a{
	font-size:13px;
	color:#fff;
	margin: 0 .5%;
}

@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/

}/*///media*/

@media screen and (max-width: 640px) {
   /*--- 表示領域が640px以下の場合に適用するスタイル ---*/
	.sp{display: block!important;}
	.pc{display: none!important;}

	.text p br{display: none;}
	.text p.br br{display: block;}

	.right{
		float: none;
		width: 95%;
		margin: 0 auto 5%;
	}

	/*追従*/
	.cont{width: 130px;}

	/*header*/
	/* header .video_hero-bg {
		-webkit-transform: translate(-60%, -50%);
		transform: translate(-60%, -50%);
	} */
	.head_img_b{
		position: absolute;
		bottom: 30px;
		right: 0;
	}

	/*main*/
	/************/
	h2{font-size: 1.5em;}
	h3{font-size: 1.3em;}

	/************/
	.tktn .box,.tktn_box{
		width: 97%;
		margin-left: auto;
		margin-right: auto;
	}

	/******
	プロフィール
	******/
	.prof .index{ flex-direction: column;}
	.prof .index h4{
		font-size: 1.5em;
		letter-spacing: 0em;
		text-align: center;
	}

	/******/
	.feature_flex,.feature_flex:nth-child(even){flex-direction: column;}
	.column{width: 100%;}
	.feature_img,.feature_flex:nth-child(even) .feature_img{margin-bottom: 1em;}

	/*form*/
	.form-mail p{font-size: 1.1em;}
	.form-item {width: 100%;}
	.label{display: none;}
	.input {margin: 1% auto;}
	.form_btn{width: 100%;}

}/*///media*/