@charset "UTF-8";

html,body{font-size: 16px;}
/*article{font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",YakuHanJP,'Noto Sans JP', sans-serif;letter-spacing: 0.05em;margin-top: 0;}*/
article{font-family: YakuHanJP,'Noto Sans JP', sans-serif;letter-spacing: 0.05em;margin-top: 0;}

.layer section#kodate{
	background: #fffdf2;
	padding-top: 0;
	position: relative;
}
.kodate_container{
  position: relative;
	--bgRatio: calc(299 / 960);
}
.mainbg{
	position: sticky;
  top: 60px;
	width: 100%;
  pointer-events: none;
}
.mainbg img{
	width: 100%;
}
.kodate_inner{
	max-width: 450px;
	margin-top: calc(-1 * (100% * var(--bgRatio)));
	margin-left:auto;
	margin-right:auto;
	padding-top: 115px;
	position: relative;
  z-index: 1;
}

/* head */
.kodate_head h1{
	color: #2f5597;
	font-size: 50px;
	font-weight: 700;
	text-align: center;
	-webkit-text-stroke:4px #FFF;
  paint-order: stroke fill;
	position: relative;
	z-index: 3;
}
.kodate_head h1 small{
	font-size: 40px;
	font-weight: 700;
}
.kodate_head.on h1{}
.kodate_head .mainimg{
	position: relative;
	z-index: 2;
	margin-top: 50px;
}
.kodate_head .mainimg .mainmv{
	position: relative;
}
.kodate_head .mainimg .mainmv .mv_item{
	position: absolute;
	top: 0;
	opacity: 0;
	transition: 1.2s ease;
}
.kodate_head .mainimg .mainmv .mv_item.on{
	opacity: 1;
}
.kodate_head .mainimg .mainmv .mv_dog{
	z-index: 2;
}
.kodate_head .mainimg .mainmv .mv_kids01,.kodate_head .mainimg .mainmv .mv_kids02,.kodate_head .mainimg .mainmv .mv_kids03{
	z-index: 3;
}

.kodate_head .mainimg .mainmv .mv_kids01.move{
	transform-origin: bottom center;
  animation: kidSway 15s ease-in-out infinite;
}
.kodate_head .mainimg .mainmv .mv_kids02.move{
	transform-origin: bottom center;
  animation: kidSwayRtl 15s ease-in-out infinite;
}
.kodate_head .mainimg .mainmv .mv_kids03.move{
	transform-origin: bottom center;
  animation: kidSway 15s ease-in-out infinite;
}
.kodate_head .mainimg .mainmv .mv_dog.move{
	transform-origin: bottom center;
  animation: kidSwayRtl 15s ease-in-out infinite;
}
@keyframes kidSway {
  0%   { transform: rotate(0deg); }
  6%   { transform: rotate(1.6deg); }
  12%  { transform: rotate(-1.4deg); }
  18%  { transform: rotate(1.2deg); }
  24%  { transform: rotate(0deg); }
  39%  { transform: rotate(0deg); }
  46%  { transform: rotate(-1.8deg); }
  57%  { transform: rotate(1.5deg); }
  68%  { transform: rotate(-1.2deg); }
  79%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes kidSwayRtl {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-1.4deg); }
  13%  { transform: rotate(1.6deg); }
  19%  { transform: rotate(-1.2deg); }
  26%  { transform: rotate(0deg); }
  40%  { transform: rotate(0deg); }
  49%  { transform: rotate(1.8deg); }
  65%  { transform: rotate(-1.5deg); }
  75%  { transform: rotate(1.2deg); }
  84%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.kodate_head .kodate_cotents{
	margin-top: -7px;
	background: #fffdf2;
	padding: 25px;
}
.dotsttl{
	color: #2e75b6;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.1em;
}
.dotsttl strong{
	font-size: 40px;
	font-weight: 700;
}
.dotsttl span.dots{
	font-size: 40px;
	font-weight: 700;
  background-image: radial-gradient(circle at center, #f6ad32 15%, transparent 15%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1.1em 0.2em;
  padding-top: .05em;
}
.kodate_head .leadtext{
	margin-top: 15px;
}
.kodate_head .leadtext p{
	font-weight: 700;
	text-align: center;
}

/* kodate_section */
.kodate_section{
	background: #f7f7f7;
	padding: 40px 0 0;
}
.contents_inner{
	padding: 0 10px;
}
.illust_container {
	margin-top: -20px;
	padding-top: 40px;
}
.illust_container .illust{
	position: relative;
	z-index: 2;
}
.illust_container .fukidashi{
	position: absolute;
	z-index: 5;
}
.illust_container .illust_bg{
	position: absolute;
	z-index: 1;
	bottom: 0;
}
.on .illust_container .fukidashi{
	transform: translateY(30px);
  opacity: 0;
	animation: fukidashiIn 400ms ease-out 1750ms forwards;
}
.section_text{
	border: 2px solid #2e75b6;
	background: #fffdf2;
	margin-top: 10px;
	padding: 25px 10px;
}
.kodate_section:nth-child(odd) .section_text{
	border: 2px solid #349829;
}
.section_text p{
	font-weight: 600;
}
.section_text div.point{
	font-size: 23px;
	font-weight: 700;
}
.section_text div.point span.marker{
  background:linear-gradient(transparent 10%, rgba(246, 173, 50,1) 0%);
	display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
	font-weight: 700;
  transition:background-size 1.5s;
	transition-delay: 1s;
}
.section_text div.point span.marker.on {
  background-size: 100% 100%;
}
.section_text .centertext{
	text-align: center !important;
}
.conclusion{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0 10px;
}
.conclusion div{
	border-radius: 32px;
	color: #FFF;
	font-size: 18px;
	font-weight: 700;
	width: 32px;
	height: 32px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 -2px;
	line-height: 1;
}
.conclusion div:nth-of-type(1){	z-index: 4;}
.conclusion div:nth-of-type(2){	z-index: 3;}
.conclusion div:nth-of-type(3){	z-index: 2;}
.conclusion div:nth-of-type(4){	z-index: 1;}
.conclusion div{
	background: #6da5d9;
}
.conclusion div:nth-child(even){
	background: #2e75b6;
}
.kodate_section:nth-child(odd) .conclusion div{
	background: #7ce670;
}
.kodate_section:nth-child(odd) .conclusion div:nth-child(even){
	background: #349829;
}
.illust_container .illust,.illust_container .illust_bg{
	transition-delay: .5s;
}
.scroll_up .section_text{
	transition-delay: 0.5s;
}
.information p small{
	font-size: 12px;
	font-weight: 700;
}
.section_01 .conclusion div.icon{
	background: url("../img/01_icon.svg") no-repeat #6da5d9;
	background-size: 80% auto;
	background-position: top 3px center;
}
.section_02 .conclusion div.icon{
	background: url("../img/02_icon.svg") no-repeat #7ce670;
	background-size: 90% auto;
	background-position: top 3px center;
}
.section_03 .conclusion div.icon{
	background: url("../img/03_icon.svg") no-repeat #6da5d9;
	background-size: 100% auto;
	background-position: top 6px center;
}
.section_04 .conclusion div.icon{
	background: url("../img/04_icon.svg") no-repeat #7ce670;
	background-size: 80% auto;
	background-position: top 3px center;
}
.section_05 .conclusion div.icon{
	background: url("../img/05_icon.svg") no-repeat #6da5d9;
	background-size: 65% auto;
	background-position: top 6px center;
}
.section_06 .conclusion div.icon{
	background: url("../img/06_icon.svg") no-repeat #7ce670;
	background-size: 85% auto;
	background-position: top 4px center;
}
.section_01 .explanation{
	text-align: center;
	margin-top: 20px;
	position: relative;
}
.section_01 .explanation .ex_head::before{
	background: url("../img/01_item06.svg") no-repeat;
	background-size: 100% auto;
	content: "";
	display: block;
	width: 19.71978021978022%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 5.494505494505495%;
}
.section_01 .explanation .ex_head::after{
	background: url("../img/01_item07.svg") no-repeat;
	background-size: 100% auto;
	content: "";
	display: block;
	width: 19.58241758241758%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 5.494505494505495%;
}
.section_01 .explanation .ex_ttl{
	color: #2e75b6;
  font-size: 34px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.08em;
	padding-top: 10px;
}
.section_01 .explanation p{
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}
.section_01 .explanation p strong{
	color: #ff0000;
	font-weight: 800;
}
.section_01 .explanation .ac_btnarea{
	text-align: center;
}
.section_01 .explanation .ex_ac_btn{
	border-radius: 10px;
	background: #2e75b6;
	color: #FFF;
	display: inline-flex;
	width: 80%;
	min-height: 30px;
	justify-content: center;
	align-items: center;
	margin: 15px 0 10px;
}
.section_01 .explanation .ex_ac_btn span.plus{
	display: inline-block;
}
.section_01 .explanation .ex_ac_btn.active span.plus{
	display: none;
}
.section_01 .explanation .ex_ac_btn span.minus{
	display: none;
}
.section_01 .explanation .ex_ac_btn.active span.minus{
	display: inline-block;
}
.section_01 .explanation .ex_ac_btn div{
	font-size: 18px;
	font-weight: 800;
	padding: 2px 2px 4px;
}
.section_01 .explanation .ex_ac_btn span img{
	width: 22px;
	height: 22px;
	display: block;
  margin-bottom: -4px;
}
.section_01 .explanation .ac_table{
	display: none;
	margin-bottom: 25px;
}

/* kodate footer */
.kodate_footer{
	background: #FFF;
	padding: 30px 0 0;
}
.kodate_footer .conclusion div{
	background: #f81c1c;
	border-radius: 46px;
	color: #FFF;
	font-size: 28px;
	font-weight: 700;
	width: 46px;
	height: 46px;
	margin: 0 -4px;
}
.kodate_footer .conclusion div:nth-child(even){
	background: #fc7b7b;
}
.kodate_footerinner{
	max-width: 450px;
	width: 96%;
	margin: 0 auto;
}
.kodate_footer .dotsttl{
	color: #333;
	margin-top: 20px;
}
.kodate_footer .dotsttl span.dots{
	color: #2e75b6;
}

/* parts */
.crossttl{
  position: relative;
  display: block;
  padding: 22px 40px;
  overflow: hidden;
	text-align: center;
	z-index: 3;
	width: 100%;
	aspect-ratio: 64 / 14;
}
.crossttl_text{
  position: relative;
  z-index: 3;
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .06em;
  -webkit-text-stroke: 0;
  white-space: nowrap;
	opacity: 0;
  transform: translateY(6px);
}
.crossttl .crossttl_text span{
	display: inline-block;
	font-weight: 700;
	transform: scale(1);
	transition: transform 0.5s ease 1.75s; 
}
.crossttl.on .crossttl_text span{
	transform: scale(1.1);
}
.crossttl_band{
  position: absolute;
	left: 0;
	top: 0;
  width: 106%;
  height: 160px;
  z-index: 1;
  pointer-events: none;
}
.bandleft{
	background: url("../img/bandleft_b.svg") no-repeat;
	background-size: 100% auto;
  clip-path: inset(0 100% 0 0);
	transition: clip-path 1s ease;
}
.bandright{
	background: url("../img/bandright_b.svg") no-repeat;
	background-size: 100% auto;
  clip-path: inset(0 0 0 100%);
	transition: clip-path 1s ease;
	z-index: 2;
}
.kodate_section:nth-child(odd) .bandleft{
  background: url("../img/bandleft_g.svg") no-repeat;
	background-size: 100% auto;
  clip-path: inset(0 100% 0 0 );
}
.kodate_section:nth-child(odd) .bandright{
  background: url("../img/bandright_g.svg") no-repeat;
	background-size: 100% auto;
  clip-path: inset(0 0 0 100%);
	z-index: 2;
}
.on .crossttl_text{
	animation: textIn 750ms ease-out 1250ms forwards;
}
.on .bandleft,.kodate_section:nth-child(odd) .on .bandleft{
	clip-path: inset(0 0 0 0);
}
.on .bandright,.kodate_section:nth-child(odd) .on .bandright{
  clip-path: inset(0 0 0 0);
}
.ribbon_container{
	text-align: center;
	margin-top: 10px;
	position: relative;
	z-index: 10;
}
.ribbon {
  display: inline-block;
  position: relative;
  height: 34px;
  line-height: 30px;
  text-align: center;
  padding: 0 20px;
  font-size: 18px;
  background: #2e75b6;
  color: #FFF;
  box-sizing: border-box;
}
.ribbon_container {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s ease;
}
.ribbon_container .labeltext{
	opacity: 0;
	transition: 1s ease-out;
	animation-delay: 1s;
	font-weight: 600;
}
.ribbon_container.on {
  clip-path: inset(0 0 0 0);
}
.ribbon_container.on .labeltext{
	animation: viewIn 1s ease-out 1s forwards;
}
.ribbon:before, .ribbon:after {
  position: absolute;
	top: 0;
	width: 0px;
	height: 0px;
	border-color: #2e75b6 transparent;
	border-style: solid;
	content: '';
}
.ribbon::before {
	left: -15px;
	border-width: 17px 0px 17px 15px;
}
.ribbon::after {
	right: -15px;
	border-width: 17px 15px 17px 0px;
}
.bottom .conclusion {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0 -15px;
	z-index: 10;
}
.kodate_footer .bottom .conclusion div {
  background: #6da5d9;
  border-radius: 40px;
  width: 40px;
  height: 40px;
  margin: 0 2px;
}
.kodate_footer .bottom .conclusion div.icon:nth-of-type(1) {
	background: url("../img/01_icon.svg") no-repeat #6da5d9;
	background-size: 90% auto;
	background-position: top 3px center;
}
.kodate_footer .bottom .conclusion div.icon:nth-of-type(2) {
	background: url("../img/02_icon.svg") no-repeat #7ce670;
	background-size: 95% auto;
	background-position: top 3px center;
}
.kodate_footer .bottom .conclusion div.icon:nth-of-type(3) {
	background: url("../img/03_icon.svg") no-repeat #6da5d9;
	background-size: 100% auto;
	background-position: top 6px center;
}
.kodate_footer .bottom .conclusion div.icon:nth-of-type(4) {
	background: url("../img/04_icon.svg") no-repeat #7ce670;
	background-size: 90% auto;
	background-position: top 3px center;
}
.kodate_footer .bottom .conclusion div.icon:nth-of-type(5) {
	background: url("../img/05_icon.svg") no-repeat #6da5d9;
	background-size: 75% auto;
	background-position: top 6px center;
}
.kodate_footer .bottom .conclusion div.icon:nth-of-type(6) {
	background: url("../img/06_icon.svg") no-repeat #7ce670;
	background-size: 95% auto;
	background-position: top 4px center;
}



.kodate_footer .bottom .conclusion div:nth-child(even) {
	background: #7ce670;
}
.bottomtext{
	background: #dbeeff;
	padding: 30px 20px 20px;
}
.bottomtext p{
	font-size: clamp(20px,3.2vw,32px);
	font-weight: 700;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.kodate_container{
		--bgRatioSp: calc(499 / 768);
	}
	.mainbg{
		position: sticky;
		top: 60px;
		width: 100%;
		pointer-events: none;
	}
	.mainbg img{
		width: 100%;
	}
	.kodate_inner{
		margin-top: calc(-1 * (100% * var(--bgRatioSp)));
		padding-top: 90px;
	}
	.kodate_head h1 {
		font-size: clamp(38px,4.8vw,46px);
	}
	.kodate_head h1 small {
		font-size: 30px;
	}
	.kodate_head .mainimg {
	  /*margin-top: -50px;*/
	}
	/* kodate footer */
	.kodate_footer{
		padding: 20px 0 0;
	}
	.kodate_footer .dotsttl{
		margin-top: 10px;
	}
	
	/* parts */
	.crossttl {
	  padding: 22px 40px 22px;
	}
	
}


/* アニメーション */
@keyframes bandGrowLeft{
  from{ transform: translate(-50%, -50%) rotate(-4deg) scaleX(0); }
  to  { transform: translate(-50%, -50%) rotate(-4deg) scaleX(1); }
}
@keyframes bandGrowRight{
  from{ transform: translate(-50%, -50%) rotate(4deg) scaleX(0); }
  to  { transform: translate(-50%, -50%) rotate(4deg) scaleX(1); }
}
@keyframes textIn{
  to{ opacity: 1; transform: translateY(0); }
}
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/* firstview anime */
.kodate_head h1 {
  transform: translateY(30px);
  opacity: 0;
	animation: titleIn 500ms ease-out 1250ms forwards;
}
.mainimg{
	transform: translateY(30px);
  opacity: 0;
	animation: mainIn 500ms ease-out 500ms forwards;
}
.mainlead{
	transform: translateY(30px);
  opacity: 0;
	animation: cotentsIn 500ms ease-out 4500ms forwards;
}
@keyframes viewIn{
  to{ opacity: 1;}
}
@keyframes titleIn{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes mainIn{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes cotentsIn{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fukidashiIn{
  to{ opacity: 1; transform: translateY(0); }
}