@import url("//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");

*, *::before, *::after {
 box-sizing: border-box
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
 margin: 0
}
ul[role="list"], ol[role="list"] {
 list-style: none
}
html:focus-within {
 scroll-behavior: smooth
}
body {
 min-height: 100vh;
 text-rendering: optimizeSpeed;
 line-height: 1.5
}
a:not([class]) {
 text-decoration-skip-ink: auto
}
img, picture {
 max-width: 100%;
 display: block
}
input, button, textarea, select {
 font: inherit
}
@media(prefers-reduced-motion:reduce) {
 html:focus-within {
  scroll-behavior: auto
 }
 *, *::before, *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important
 }
}

/*--　までまでリセット　　　----*/


:root {
  --base-maxwidth: 1200px;
  --base-padding: 20px;
		--color-oyellow:#fec800;
}



/* Reset 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 16px;
 font: inherit;
 vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display: block;
}
*/

body {
 color: #333;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
 font-size: 13pt;
 font-weight: 400;
 line-height: 1.65;
}

a {
 color: inherit;
 text-decoration: none;
 transition: border-bottom-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
a:hover {
 color: #FFED00;
 border-bottom-color: transparent;
}
strong, b {
 font-weight: 800;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 color: inherit;
 text-decoration: none;
}

header{
position: absolute;
z-index: 4;
}

header div{
background-color: var(--color-oyellow);
border-radius: 0 7px 7px 0;
width: 16em;
font-size: 20px;
height: 6em;
text-align: center;

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

header div p span{
font-size: 13px;
display: block;
}
header div p strong{
font-weight: 700;
margin: -.3em 0;
}
@media screen and (max-width: 736px) {
header div{
width: 12em;
font-size: 15px;
height:auto;
padding: 10px;
}
}


.main{
position: relative;
width: 100%;
display: block;
min-height: 750px;
margin-bottom: 20px;
}
.mainimg{
position: absolute;
z-index: 1;
top:0px;
right: 0;
}
.textbox{
background-color: rgba(255, 255, 255, 0.8);
padding: 30px;

position: absolute;
z-index: 4;
top:150px;
left: 0px;
margin: 30px;
}
.textbox p{
color: #56a7ce;
font-weight: 400;
font-size: 23px;
}

h1{
font-weight: 500;
font-size: 43px;
letter-spacing: .03em;
margin-right: -.03em;/*letter-spacingと同じ値*/
}
h1 span{
position: relative;
}

h1 span:after{
content: "";
position: absolute;
left: 0;
bottom: -7px;
border-bottom: solid 2px #717171;

width: 10%;
transition: width 3s; /* アニメーションを適用 */
}
h1 span.visible:after {
    width: 100%; /* 最終状態 */
}

@media screen and (max-width: 736px) {
.textbox p{
font-size: 18px;
}
h1{
font-size: 23px;
}
.textbox{
top:80px;
}
h1 span:after{
bottom: -3px;
}
.mainimg{
display: none;
}
.main{
background: url("../imgs/main_bg.png");
background-size: auto 100%;
min-height: 400px;
}
h1 span:after{content:none;}
}


/*-- リード -------------------------------*/

.lead00 {
text-align: center;
}


.lead00 p{
text-align: center;
width: fit-content;
background-color: var(--color-oyellow);
padding: 10px 20px;
border-radius: 30px;
margin: auto;
color: #fff;
font-weight: 600;
font-size: 24px;
display: block;
position: relative;
}

.lead00 p:after{
content: "";
position: absolute;
right: 0;
bottom: -20px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: var(--color-oyellow) transparent transparent transparent;
border-width: 20px 8px 0 8px;
}

.lead{
background-color: #ddedf5;
padding: var(--base-padding);
}
.lead p{
text-align: center;
}
.lead h2{
text-align: center;
font-size: 38px;
padding-top: 40px;
position: relative;
width: fit-content;
margin: auto;
line-height: 1.4em;
}
.lead h2 sup{
font-size: 0.5em;
vertical-align: top;
}
.lead h2 span{
color: var(--color-oyellow);
font-size: 120%;
position: relative;
}

.lead h2 span::before{
content: "";
position: absolute;
right: -40px;
top:-36px;
height: 52px;
width: 50px;
background: url("../imgs/icon_hirameki.svg") no-repeat top center;
}
.lead h2 br{
display: none;
}

@media screen and (max-width: 736px) {
.lead h2{
font-size: 31px;
}
.lead h2 br{
display: block;
}
.lead h2 span::before {
top : -2em;
}
}

.activbox {
max-width: 1400px;/*var(--base-maxwidth)*/
margin: 0 auto;
padding: var(--base-padding);
position: relative;

display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.no4 .activbox,
.no2 .activbox {
flex-direction: row-reverse;
}
/*　まるから延びる線*/
.activbox::before{
content: "";
height: 0; /* 初期状態は0 */
width: 2px;
position : absolute;
top: 117px;
transition: height 4s; /* 高さの変化にアニメーションを適用 */
}
.activbox.visible::before {
 /* 最終状態 .act_bottomno高さプラス */
height: calc(100% - 117px + 100px );
z-index: 1;
}
no4 .activbox.visible::before {
 /* 最終状態 .act_bottomno高さプラス */
height: calc(100% - 117px );
z-index: 1;}
.img_area{
position: relative;
z-index: 1;
}


.img_area h4{
color: #fff;
background-color: var(--color-oyellow);
border-radius: 50%;
width: fit-content;
padding: 20px;
font-size: 1.5em;
position: absolute;
top: 0;
}
.no1 .img_area h4,
.no3 .img_area h4{
right: 20px;
}
.no2 .img_area h4,
.no4 .img_area h4{
left: 20px;
}
.icon{
position: relative;
}
/*まる*/
.icon p{
color: #fff;
width: 100px;
font-size: 46px;
font-weight: 500;
line-height: 100px;
text-align: center;
display: block;
border-radius: 90px;
opacity: 0.9;
transition: all .3s ease;
position: relative;
display: block;
}

/*
.icon p::before{
width: 2em;
position: absolute;
content: "活動";
font-size: 12px;
top:-30px;
left: 40px;
}*/
.no3 .icon p::before,
.no1 .icon p::before{
left: 40px;
}
.no2 .icon p::before,
.no4 .icon p::before{
right: 40px;
}

/* z-index 重なり順 */
.activbox {
z-index: 1;
}
.activbox div{
z-index: 4;
}
.no1 .activbox::before{
z-index: 2;
}
.yurayura {
z-index: 10;
}
.act_bottom::after {
z-index: 10;
}


/* 幅 */
.activbox .icon{
width:  120px;
}
.activbox .img_area,
.activbox .con_area{
margin: 0 20px;
width: calc((100% - 120px) / 2.2);
}

.activbox .con_area h4{
margin-bottom: 30px;
}

.no1 .activbox .con_area,
.no4 .activbox .con_area{
margin-left: -20px;
}

.no2 .activbox .con_area,
.no3 .activbox .con_area{
margin-right: -20px;
}


@media screen and (max-width: 736px) {
.activbox {
display: block;
}
.activbox .img_area,
.activbox .con_area{
width: 100% ;
margin: 10px 0;
}
.no1 .activbox .con_area,
.no4 .activbox .con_area,
.no2 .activbox .con_area,
.no3 .activbox .con_area{
margin: 10px 0;
}
/*　まるから延びる線*/
.activbox::before{
height:2px;
width: 0;
top: 70px;
transition: width 4s; /* 高さの変化にアニメーションを適用 */
}

.activbox.visible::before {
width: calc(100% - 120px); /* 最終状態 */
height:2px;
}

.no4.visible::before,
.no2.visible::before {
width: calc(100% - 120px); /* 最終状態 */
transition: width 4s ease-out; /* アニメーションの設定 */
height:2px;
}
}




/* 文字色 */
.con_area h3{
font-size: 38px;
font-weight: 600;
}
@media screen and (max-width: 736px) {
.con_area h3{
font-size: 30px;
}
}
.no1 .con_area h3{
color: #6a92dd;
}
.no3 .con_area h3{
color: #e24d4d;
}
.no4 .con_area h3,
.no2 .con_area h3{
color: #64af64;
}

/* まるの背景色　*/
.no1 .icon p{
background-color: #6a92dd;
}
.no3 .icon p{
background-color: #e24d4d;
}
.no4 .icon p,
.no2 .icon p{
background-color: #64af64;
}



/*　まるから延びる線色*/
.no1 .activbox::before{
background-color : #6a92dd;
left: 68px;
}
.no4 .activbox::before,
.no2 .activbox::before{
background-color : #64af64;
right: 87px;
}
.no3 .activbox::before{
background-color: #e24d4d;
left: 68px;
}

@media screen and (max-width: 736px) {
/*まるについて*/
.activbox .con_area{
clear: both;
}
.no1 .activbox::before,
.no3 .activbox::before{
left:120px;
}
.no2 .activbox::before,
.no4 .activbox::before{
right: 120px;
}
.no4 .icon,
.no2 .icon{
float: right;
}
.no4 .activbox .icon,
.no2 .activbox .icon{
width:100px;
}
}
/*　背景色　*/

.no1,
.no2,
.no3,
.no4{
position: relative;
}

.no2,
.no4{
background-color: #f1f7e5;
}
.no1{
background-color: #ddedf5;
}
.no3{
background-color: #f5e7dd;
}


.no3::after {
	content: '';
	position: absolute;
	top: 0; /* 上部を0に設定 */
	bottom: -50px; /* 下部を-50pxに設定 */
	left: 0;
	right: 0;
	transform: skewY(5deg) translateY(-90px); /* skewYを正の値にし、translateYを負の値に */
	z-index: -1;
	background-color: #f5e7dd;
}
.no2::after {
content: '';
position: absolute;
top: -50px;
bottom: 0;
left: 0;
right: 0;
transform: skewY(-5deg) translateY(90px);
z-index: -1;
background-color: #f1f7e5;
}



/* 斜め */

.act_bottom{
position: relative; /* 擬似要素を使用するために相対位置を設定 */
height: 100px; /* 高さを50pxに設定 */
overflow: hidden; /* はみ出た部分を隠す */
}
.act_bottom::after {
content: '';
position: absolute;
top: -35px;
left: 0;
right: 0;
bottom: 0; /* 擬似要素の高さを親要素に合わせる */
}
.no1 .act_bottom{
background-color: #ddedf5;
}
.no1 .act_bottom::after{
background-color: #f1f7e5; 
transform: skewY(-3deg) translateY(90px);
}

.no2 .act_bottom{
background-color: #f1f7e5;
}
.no2 .act_bottom::after{
background-color: #f5e7dd;
transform: skewY(3deg) translateY(90px);
}

.no3 .act_bottom{
background-color: #f5e7dd;
}
.no3 .act_bottom::after{
background-color: #f1f7e5; 
transform: skewY(-3deg) translateY(90px);
}

.no4{
padding-bottom: 100px;
}

/*---最後----*/





.lead_end {
text-align: center;
margin:0 10px;
}


.lead_end p{
text-align: center;
width: fit-content;
background-color: var(--color-oyellow);
padding: 10px 20px;
border-radius: 30px;
margin: -20px auto 0;
color: #fff;
font-weight: 600;
font-size: 24px;
display: block;
position: relative;
}

.lead_end p:after{
content: "";
position: absolute;
right: 0;
bottom: -20px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: var(--color-oyellow) transparent transparent transparent;
border-width: 20px 8px 0 8px;
}
.bottombox .lead{
background-color : #fff;
}

@media screen and (max-width: 736px) {
.bottombox .lead h2 span::before {
top: -1em;
}
}





.bottombox .yurayura,
.bottombox .lead{
}
.lead_end p{
color: #333;
}

.btn{
padding: 10px;}
.btn a {
text-align: center;
background-color: #000;
color: #fff;
width: fit-content;
margin: 1em auto 5em;
padding: 20px 80px 20px 60px;
border-radius: 10px;
display: block;
position: relative;
font-size: 1.2em;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s; /* 背景色とサイズの変化にアニメーションを適用 */
}


.btn a:hover {
background-color: #fff;
color: #000;
transform: scale(1.05);
border: solid 1px var(--color-oyellow) ;
}

.btn a::before {
		content: '';
		width: 10px;
		height: 10px;
		border-top: solid 2px var(--color-oyellow);
		border-right: solid 2px var(--color-oyellow);
		position: absolute;
		right: 40px;
		top: 50%; /* 中央に配置 */
		transform: translateY(-50%) rotate(45deg); /* 縦方向に中央揃え */
		transition: transform 0.3s, width 0.3s, height 0.3s; /* アニメーションを適用 */
}

.btn a:hover::before {
		transform: translateY(-50%) translateX(10px) rotate(45deg); /* 縦方向を維持しつつ、右に移動 */
		width: 20px; /* 矢印の幅を2倍に */
		height: 20px; /* 矢印の高さを2倍に */
}


@media screen and (max-width: 736px) {
.btn a {
padding: 20px 40px 20px 25px;
}
.btn a::before {
		right: 20px;
}
}





footer{
background-color: var(--color-oyellow);
font-size: 13px;
padding: var(--base-padding);
}

footer section {
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content:space-around;

margin: auto;
height: 80px;
 max-width: var(--base-maxwidth);
text-align: center;
}
footer section div{
width: 45%;
}
footer section strong{
font-weight: 800;
font-size: 1.5em;
}

footer section div:nth-child(1) p{
text-align: left;
}
@media screen and (max-width: 736px) {
footer section strong,
footer section {
display:block;
}
footer section div{
width: 100%;
}
footer section div:nth-child(1) p{
text-align: center;
}
footer section{
height: auto;
}
}

.copyright{
background-color: #000;
text-align: center;
font-size: 12px;
color: #fff;
padding: var(--base-padding);
}
.copyright div{
height: 100px;

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

/* ------------------------------
上に上がるボタン
------------------------------ */

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 0px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  background-color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  width: 50px;
		height: 50px;
  text-align: center;
		position: relative;
  display: block;
  border: solid #6a92dd 1px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
#page-top a::before {
  content: '';
  width: 20px;
  height: 20px;
  border-top: solid 2px #4069b8;
  border-right: solid 2px #4069b8;
  position: absolute;
  left: 15px;
  transform: rotate(-45deg);
  top: 21px;
}

@media screen and (max-width: 736px) {
#page-top a {
  padding: 14px 5px;
}
}

/* ------------------------------
アニメーション
------------------------------ */

.fadeInRoll01 {
opacity: 0;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-animation: animate-fadeInRoll01 0.8s forwards;
animation: animate-fadeInRoll01 0.8s forwards
}
@-webkit-keyframes animate-fadeInRoll01 {
0% {
opacity:0
}
85% {
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg)
}
90% {
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg)
}
to {
opacity:1;
-webkit-transform:rotate(0);
transform:rotate(0)
}
}
@keyframes animate-fadeInRoll01 {
0% {
opacity:0
}
85% {
-webkit-transform:rotate(-3deg);
transform:rotate(-3deg)
}
90% {
-webkit-transform:rotate(-3deg);
transform:rotate(-3deg)
}
to {
opacity:1;
-webkit-transform:rotate(0);
transform:rotate(0)
}
}

/*左右　ゆらゆら*/
.yurayura {
animation: shake 5s infinite;
}
@keyframes shake {
0% { transform: rotate(8deg);/*時計回りに20度傾いた状態からスタート*/
}
50% {transform: rotate(-8deg);/*反時計回りに20度まで回転*/
}
100% { transform: rotate(8deg);/*時計回りに20度の位置まで回転*/
}
}





/*-common-----------------------------*/






/* ------------------------------
共有
------------------------------ */
img {
 max-width: 100%;
 height: auto;
 width /***/ : auto;
}
.cl {overflow: hidden;}

/* ---------------------------- */
/* ---------------------------- */
.w100 {width: 100%;}
.w70 {width: 68%;}
.w60 {width: 60%;}
.w40 {width: 40%;}
.w30 {width: 25%;}



.fr {float: right;}
.fl {float: left;}
.w50 {width: 47%;}
@media screen and (max-width: 736px) {
.w100,
.w50,
.w70,
.w60,
.w40 ,
.w30 {width: 100%;}
.fr,fl {float:none;}
}
.pc{ display: block;}
.smp{ display: none;}
@media screen and (max-width: 736px) {
.pc{ display: none;}
.smp{ display: block;}
}
/*------------------------
背景色
-------------------------*/
.bg_white {background: #ffffff !important;}
.bg_gray {background: #F3F3F3;}
.bg_yellow {background: #FFFFD0;}
/*------------------------
文字色
-------------------------*/
.c_black {color: #000000;}
.c_yerow {color: #FF0;}
.c_red {color: #E30000;}
.c_white {color: #ffffff;}
/*----------------------*/
/*位置 */
/*----------------------*/
.p05 {padding: 5px;}
.p20 {padding: 20px;}
.p0510 {padding: 5px 10px;}
.pl05 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl50 {padding-left: 50px;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pr30 {padding-right: 30px;}
.pr50 {padding-right: 50px;}
.pt05 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pb05 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.mt05 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mb05 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb-05em{margin-bottom: -.5em;}
.ml05 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml35 {margin-left: 35px;}
.ml40 {margin-left: 40px;}
.mr05 {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.va_b {vertical-align: bottom;}
.va_t {vertical-align: top;}
.va_m {vertical-align: middle;}
/*----------------------*/
/*文字関連 */
/*----------------------*/
.ta_l {text-align: left;}
.ta_c {text-align: center;}
.ta_r {text-align: right;}
.ti_1 {text-indent: -1em;
 padding-left: 1em;}
.bold {font-weight: bold !important;}
.normal {font-weight: normal !important;}
.f80 {font-size: 80% !important;}
.f90 {font-size: 90% !important;}
.f100 {font-size: 100%;}
.f110 {font-size: 110%;}
.f120 {font-size: 120%;}
.f130 {font-size: 130%;}
.f140 {font-size: 140%;}
.f150 {font-size: 150%;}
.f160 {font-size: 160%;}
.flh23 {line-height: 2.3em;}
.flh16 {line-height: 1.6em;}
.flh20 {line-height: 2em;}
.weight400 {font-weight: 400;}
.weight500 {font-weight: 500;}
.weight600 {font-weight: 600;}

/*----------------------*/
/*ライン*/
/*----------------------*/
.l_b2 {
 border: 2px solid #000 !important;
}

/*----------------------*/
/*リスト*/
/*----------------------*/
ol {
 padding-left: 25px;
}
ol li {
 line-height: 1.5em;
}
ul.ul_inl li {
 display: inline;
}
ul.ul_disc li {
 background: url(../imgs/icon_o.gif) no-repeat 0em 0.56em;
 padding-left: 15px;
}
.ul_discg li a, .ul_disc a {
 text-decoration: underline;
}