@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

.en{ 
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*----------------------------------------------------
	☆Reset
----------------------------------------------------*/
body, h1, h2, h3, h4, h5, h6, pre, ul , ol , li, dl, dt, dd, p, img {
	margin:0;
	padding:0;
}
h1, h2, h3, h4, h5, h6{
    font-weight: 700;
}
body {
	font-size: 16px;
    font-family: "Zen Maru Gothic", '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS P Gothic',sans-serif;
    font-weight: 500;
	color:#000;
    letter-spacing: 0.03em;
    font-feature-settings: "palt";
	line-height: 1.75;
	width: 100%;
	overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    background: #f2f2f2;
}
body::before,
body::after{
    content: "";
    width: calc(100% - 40px);
    height: calc(100vh - 40px);
    position: fixed;
    left: 0;
    top: 0;
    border: 20px solid #00a550;
    z-index: 1000;
    pointer-events: none;
}
body::after{
    border: 2px solid #000;
    width: calc(100% - 4px);
    height: calc(100vh - 4px);
}

#wrapper{
	width: 100%;
    overflow: hidden;
}

body, div, p, span, ul, ol, li, dl, dt, dd, table, tr, th, td, img, header, footer, small, section, a, h1, h2, h3, h4, h5, h6{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
a {
	color:#000;
	text-decoration:none;
	cursor:pointer;
	outline:none;
}
a:link {
	color:#000;
	text-decoration:none;
	outline:none;
}
a:hover {
	text-decoration:none;
	outline:none;
}
ul, ol {
	list-style-type:none;
}
a:focus {
  outline: none;
}
img{ 
	vertical-align:bottom;
	width: 100%;
	-webkit-backface-visibility: hidden;
}

.sp{ display:none;}
.tab{ display:none;}
.pc{ display:block;}
.pc-inline{ display:inline;}
.btm0{ margin-bottom: 0 !important;}
.top0{ margin-top: 0 !important;}

.center{ text-align: center;}
.justify{ text-align: justify;}
.left{ text-align: left;}
.right{ text-align: right;}

.inlineBlock{ display: inline-block;}

.white{ color: #fff;}
.red{ color: #e21b13;}
.green{ color: #00893e;}

.bgGray{ background: #f2f2f2;}
.bgBlack{ background: #000;}

.flex{
    display: flex;
    justify-content: space-between;
}
.flex.flex-center{
    justify-content: center;
}

a.link{
    transition: .4s;
    text-decoration: underline;
}


.deco{
    position: absolute;
}

.max1340{    width: calc(90% - 28px);    max-width: 1340px;    margin: 0 auto;}
.max1320{    width: calc(90% - 28px);    max-width: 1320px;    margin: 0 auto;}
.max1200{    width: calc(90% - 28px);    max-width: 1200px;    margin: 0 auto;}
.max1000{    width: calc(90% - 28px);    max-width: 1000px;    margin: 0 auto;}
.max1080{    width: calc(90% - 28px);    max-width: 1080px;    margin: 0 auto;}
.max960{    width: calc(90% - 28px);    max-width: 960px;    margin: 0 auto;}
.max900{    width: calc(90% - 28px);    max-width: 900px;    margin: 0 auto;}
.max750{    width: calc(90% - 28px);    max-width: 750px;    margin: 0 auto;}
.max800{    width: calc(90% - 28px);    max-width: 800px;    margin: 0 auto;}


.max1200 .max750{    width: 100%;}

.text{
	text-align: justify;
	letter-spacing: 0.04em;
    line-height: 2.2;
}

.nowrap{ white-space: nowrap; display: inline-block;}

.pin{
    background: url( "../images/common/pin.svg") center center / contain no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    display: block;
}
.pin:nth-child(1 of .pin){
    left: 10px;
    top: 10px;
}
.pin:nth-child(2 of .pin){
    right: 10px;
    top: 10px;
}
.pin:nth-child(3 of .pin){
    left: 10px;
    bottom: 10px;
}
.pin:nth-child(4 of .pin){
    right: 10px;
    bottom: 10px;
}

.notice{
    opacity: 0.5;
    font-size: 11px;
}

.r30{ border-radius: 30px;}
.r25{ border-radius: 25px;}
.r20{ border-radius: 20px;}

/*--- 画像ボケ防止 ---*/
@media screen and (min-width:769px) {
	img { 
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		image-rendering: crisp-edges;
		image-rendering: -webkit-optimize-contrast;
	}
}

/*----------------------------------------------------
	☆BASE CONTENTS PC
----------------------------------------------------*/

/*-- header --*/
#header {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1001;
}

#header .header01{
    display: flex;
    justify-content: space-between;
}

#header .headerL,
#nav-content .headerL{
    display: flex;
    height: 80px;
}
#header .headerLogo,
#nav-content .headerLogo{
    max-width: 230px;
    margin: 0;
    transition: .4s;
    background: #fff;
    border: 2px solid #000;
    height: 100%;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header .sitename,
#nav-content .sitename{
    background: #00a550;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 30px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    border: 2px solid #000;
    margin-left: -2px;
}

#header .sitename a,
#nav-content .sitename a{
    color: #fff;
}

#header .headerR{
    display: flex;
    position: relative;
    align-items: center;
    margin-top: -1px;
}

#header .entryBtn{
    width: 115px;
    height: 100%;
    margin: 11px 20px 0 30px;
}
#header .entryBtn a{
    transition: .4s;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
#header .entryBtn a::after{
    content: "";
    display: block;
    background: url("../images/common/bg_entry.svg") center center / contain no-repeat;
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 67px;
    top: 6px;
}
#header .entryBtn a img{
    position: absolute;
    top: 0;
    z-index: 1;
    transition: .4s;
}

#header .menuBtn,
.nav-close{
    width: 75px;
    height: 75px;
    background: #000;
    position: relative;
    transition: .4s;
}
#header .menuBtn #nav-open{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: .4s;
}

#header .menuBtn .border,
.nav-close .border{
    height: 3px;
    border-radius: 100px;
    background: #fff;
    position: absolute;
    left: 30%;
    transition: .4s;
    width: 40%;
}
#header .menuBtn .border01{
    top: 40%;
}
#header .menuBtn .border02{
    top: 55%;
}




/*-- バーガーメニュー --*/

#overlay {
    display: none;
    width: 100%;
    height: 100vh;
    background: #00a550;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0px;
    z-index: 9997;
    width: 100%;
    height: 100vh;

    color: #fff;
    transition: 0.75s;
    visibility: hidden;
    text-align: left;
    opacity: 0;
}

#nav-content.open {
    opacity: 1;
    visibility: visible;
}
#nav-content a{
    color: #fff;
}

#nav-content .navHeader{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
}
#nav-content .navLogo{
    position: absolute;
    left: 30px;
    top: 30px;
    display: flex;
    align-items: flex-start;	
    max-width: 400px;
}
#nav-content .nav-inner{
    width: 85%;
    margin: 0 auto;
    max-width: 1400px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    height: 100vh;
}

.nav-close{
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    cursor: pointer;
}
.nav-close.open {
    opacity: 1;
    visibility: visible;
}
.nav-close .border{
    left: 50%;
    top: 50%;
}
.nav-close .border01{
    transform: translate(-50%,-50%) rotate(45deg);
}
.nav-close .border02{
    transform: translate(-50%,-50%) rotate(-45deg);
}



/*-- copyBox --*/
#copyBox{
    text-align: center;
    padding: 183px 7.5% 160px;
    background: url("../images/common/bg_footer_copy.png") center top / 1400px no-repeat;
    position: relative;
    z-index: 0;
}
#copyBox .main{
    max-width: 836px;
    margin: 0 auto;
}
#copyBox .sub{
    max-width: 527px;
    margin: 30px auto 0;
}


/*-- footer --*/
#footer{
    background: #00a550;
    position: relative;
    width: calc(100% - 40px - 40px);
    border-radius: 30px;
    margin: 0 auto 40px;
}

#footer::before,
#footer::after{
    content: "";
    display: block;
    position: absolute;
}
#footer::before{
    width: 255px;
    aspect-ratio: 1 / 0.647;
    background: url("../images/common/img_footer_copy_01.png") center center / contain no-repeat;
    left: calc(50% + 390px);
    top: -125px;
    z-index: 1;
}
#footer::after{
    width: 116px;
    aspect-ratio: 1 / 0.6766;
    background: url("../images/common/img_footer_copy_02.png") center center / contain no-repeat;
    left: calc(50% - 464px);
    top: -41px;
    z-index: 1;
}

#footer .entry{
    max-width: 256px;
    width: 50%;
    margin: 0 auto;
    transform: translate(0,-50%);
}
#footer .entry a{
    position: relative;
    transition: .4s;
    display: table;
    margin: 0 auto;
}
#footer .entry a img{
    transition: .4s;
}
#footer .entry a::after{
    content: "";
    transition: .4s;
    display: block;
    background: url(../images/common/bg_entry.svg) center center / contain no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10px;
    z-index: -1;
}

#footer .footerInr{
    max-width: 1200px;
    width: 85%;
    margin: 0 auto;
    color: #fff;
    padding: 20px 0 0 0;
    position: relative;
}
#footer .footerInr a{
    color: #fff;
}

#gnav,
#footer .footerInr .footerLinkList{
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 60px 0;
    display: flex;
    align-items: center;
}
#gnav{
    border: none;
    padding: 0;
}
#gnav .logo,
#footer .footerInr .footerLinkList .footerLogo{
    width: 30%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight: 700;
    line-height: 2;
}
#gnav .logo{
    width: 300px;
}
#gnav .logo img,
#footer .footerInr .footerLinkList .footerLogo img{
    max-width: 190px;
    display: block;
    margin: 0 auto;
}

#gnav .logo .link01{
    margin-top: 30px;
}
#gnav .logo .link01 a{
    font-size: 14px;
}

#gnav > ul,
#footer .footerInr .footerLinkList > ul{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -40px;
    width: 70%;
}
#gnav > ul > li,
#footer .footerInr .footerLinkList > ul > li{
    width: calc((100% - (30px * 2)) / 3);
    margin-right: 30px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
#gnav > ul > li:nth-child(n + 4),
#footer .footerInr .footerLinkList > ul > li:nth-child(n + 4){
    border-bottom: none;
    margin-bottom: 0;
}
#gnav > ul > li:nth-child(3n),
#footer .footerInr .footerLinkList > ul > li:nth-child(3n){
    margin-right: 0;
}
#gnav > ul > li .categoryTitle,
#footer .footerInr .footerLinkList > ul > li .categoryTitle{
    margin-bottom: 1em;
    font-weight: 700;
    font-size: 16px;
}
#gnav > ul > li .categoryTitle{
    font-size: 20px;
}
#gnav > ul > li ul li + li,
#footer .footerInr .footerLinkList > ul > li ul li + li{
    margin-top: 0.5em;
}
#gnav > ul > li ul li a,
#footer .footerInr .footerLinkList > ul > li ul li a{
    font-size: 14px;
    position: relative;
    padding-left: 1em;
    transition: .4s;
    display: block;
    letter-spacing: 0.01em;
}
#gnav > ul > li ul li a{
    font-size: 18px;
}
#gnav > ul > li ul li a::before,
#footer .footerInr .footerLinkList > ul > li ul li a::before{
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #7dd124;
    border-right: 0;
    
    content: "";
    transform: translate(0,-50%);
    position: absolute;
    left: 0;
    top: 0.9em;
    transition: .4s;
}

#gnav > ul > li ul.intList li a::after,
#footer .footerInr .footerLinkList > ul > li ul.intList li a::after{
    top: 7px;
}

#gnav > ul > li ul li a .position,
#footer .footerInr .footerLinkList > ul > li ul li a .position{
    font-size: 80%;
    line-height: 1.2;
    display: block;
}

#gnav > ul > li ul li a.window::after,
#footer .footerInr .footerLinkList > ul > li ul li a.window::after{
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-left: 0.5em;
    background: url("../images/common/window_white.svg") center center / contain no-repeat;
}


#footer .footerBottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
    width: 100%;
}
#footer .footerBtmLeft{
    display: flex;
    flex-shrink: 0;
}
#footer .footerBtmLeft .title{
    font-size: 14px;
    font-weight: 700;
    margin-right: 50px;
    line-height: 1;
}
#footer .footerBtmLeft .title + .link01{
    font-size: 14px;
}


#footer address{
    text-align: right;
    color: #fff;
    line-height: 1;
}
#footer address small{
    opacity: 0.5;
    font-size: 10px;
    font-style: normal;
}

/*--- topcontrol ---*/
#pagetop{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1002;
    opacity:0;
    transition: .4s;
    cursor: pointer;
    background: #ffbb33;
    border: 2px solid #000;
}
#pagetop::before{
    content: "";
    display: block;
    position: relative;
    background: url("../images/common/pagetop.svg") center center / contain no-repeat;
    width: 30%;
    height: 30%;
    left: 35%;
    top: 35%;
}
#pagetop.is-fadein {
    visibility: visible;
    opacity: 1;
}



/*----------------------------------------------------
	☆INNER BASE PARTS
----------------------------------------------------*/

/*-- mainTitle --*/
#mainTitle{
    position: relative;
    width: calc(100% - 40px - 40px);
    margin: 100px auto 0;
}
#mainTitle .mainTitleInr{
    background: #ffbb33;
    border: 2px solid #000;
    border-radius: 30px;
    color: #fff;
    padding: 10px;
    position: relative;
    text-align: center;
}
#mainTitle .mainTitleInr .inner02{
    background: url("../images/common/bg_check_green.gif") left top / 72px repeat;
    border: 2px solid #000;
    border-radius: 20px;
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

#mainTitle .title{
    margin: 0 auto;
    position: relative;
    padding-top: 90px;
    z-index: 1;
}
#mainTitle .title::before{
    content: "";
    display: block;
    width: 75px;
    height: 75px;
    left: 50%;
    top: 0;
    position: absolute;
    transform: translate(-50%,0);
    z-index: 1;
}
#mainTitle .title .en{
    font-size: 100px;
    line-height: 1;
    display: table;
    margin: 0 auto;
    color: #ffbb33;
  -webkit-text-fill-color: #ffbb33;
  -webkit-text-stroke: 2px black;
    position: relative;
    z-index: 1;
}
#mainTitle .title .en::before{
    position: absolute;
    z-index: -1;
    left: 0;
    top: -3px;
    -webkit-text-stroke: 2px black;
    color: #e9651f;
  -webkit-text-fill-color: #e9651f;
    display: block;
}

#mainTitle .title.purple .en{
    color: #adb7e8;
        -webkit-text-fill-color: #adb7e8;
}
#mainTitle .title.purple .en::before{
    color: #8f5ae1;  
    -webkit-text-fill-color: #8f5ae1;
}

#mainTitle .title.green .en{
    color: #66dd9f;
        -webkit-text-fill-color: #66dd9f;
}
#mainTitle .title.green .en::before{
    color: #07a587;  
    -webkit-text-fill-color: #07a587;
}

#mainTitle .title.pink .en{
    color: #ffa2b5;
        -webkit-text-fill-color: #ffa2b5;
}
#mainTitle .title.pink .en::before{
    color: #ff6695;  
    -webkit-text-fill-color: #ff6695;
}


#mainTitle .title .jp{
    font-size: 24px;
    line-height: 1;
    display: block;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.inrNav{ 
    width: 100%;
    margin: -30px 0 -10px;
}

.inrNav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}
.inrNav ul li:not(:last-child){
    margin-right: 20px;
    margin-bottom: 20px;
}
.inrNav ul li{   
}
.inrNav ul li a .linkArrow01{
    margin-right: 0.5em;
}

#mainTitle .introduction{
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 60px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
#mainTitle .introduction dt{
    font-size: 32px;
    line-height: 1.5;
    width: 35%;
    font-weight: 700;
}
#mainTitle .introduction dd{
    width: 60%;
    text-align: justify;
}

#mainTitle::before{
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    aspect-ratio: 1 / 1;
    clip-path: polygon(100% 100%, 0% 100%, 100% 0%);
}


/*--- section ---*/
#contents .section{
    padding: 120px 0;
}
#contents .section.noPadding{
    padding: 0;
}
#contents .section.noPaddingTop{
    padding-top: 0;
}


/*----------------------------------------------------
	☆COMPONENT PC
----------------------------------------------------*/

/*-- head --*/
.head01{
    text-align: center;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 60px;
    color: #00893e;
}
.head01::after{
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    border-radius: 100px;
    background: #00893e;
    position: absolute;
    left: calc(50% - 25px);
    bottom: 0;
}
.head01 span:not(.nowrap){
    display: block;
    line-height: 1.5;
}
.head01 .en{
    font-size: 12px;
    color: #72be44;
}
.head01 .jp{
    font-size: 30px;
    font-weight: 700;
}

.head02{
    margin: 0 auto;
    max-width: 900px;
    padding: 5px;
    background: #e9651f;
    border: 2px solid #000;
    border-radius: 30px;
    position: relative;
    transform: translateY(-60px);
    width: 90%;
}
.head02 span:not(.nowrap){
    display: block;
}
.head02 .inner{
    background: url("../images/common/bg_check_yellow.png") center center / 72px repeat;
    border: 2px solid #000;
    border-radius: 25px;
    text-align: center;
    padding:30px 20px;
    position: relative;
}
.head02 .num{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-50%);
    background: #07a587;
    border: 2px solid #000;
    border-radius: 100px;
    font-size: 20px;
    padding: 4px 25px 2px;
}
.head02 .num::before{
    background: #85e4b2;
    border: 2px solid #000;
    border-radius: 100px;
    display: block;
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    z-index: -1;
}
.head02 .title{
    font-size: 30px;
}

.head03{
    margin-bottom: 40px;
    text-align: center;
}
.head03 .jp{
    font-size: 16px;
}
.head03 .en{
    font-size: 70px;
    line-height: 1;
    display: table;
    margin: 0 auto;
    color: #ffbb33;
    -webkit-text-fill-color: #ffbb33;
    -webkit-text-stroke: 2px black;
    position: relative;
    z-index: 1;
}
.head03 .en > span {
    position: absolute;
    z-index: -1;
    left: 0;
    top: -4px;
    -webkit-text-stroke: 2px black;
    color: #e9651f;
    -webkit-text-fill-color: #e9651f;
    display: block;
}

.head04{
    text-align: center;
    margin-bottom: 40px;
}
.head04 .en{
    display: block;
    font-size: 12px;
    line-height: 1.2;
}
.head04 .jp{
    display: block;
    font-size: 30px;
    line-height: 1.2;
}

.head05{
    text-align: center;
    font-size: min(26px,5vw);
    margin-bottom: 1em;
}

.head06{
    text-align: center;
    font-size: min(30px,6vw);
    margin-bottom: 1em;
    color: #00893e;
    line-height: 1.6;
}

.head07{
    display: table;
    margin: 0 auto 30px;
    background: #00893e;
    border-radius: 100px;
    padding: 10px 30px;
    line-height: 1.2;
    font-size: 20px;
    color: #fff;
}


.head08{
    position: relative;
    border: 2px solid #000;
    padding: 5px;
    border-radius: 200px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
.head08 span{
    display: block;
}
.head08 .inner{    
    border: 2px solid #000;
    border-radius: 200px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: min(34px,3.5vw);
    padding: 0.7em;
    line-height: 1.5;
    position: relative;
}
.head08 .inner::before,
.head08 .inner::after{
    content: "";
    width: 16px;
    aspect-ratio: 1 / 1 ;
    background: url("../images/common/pin.svg") center center / contain no-repeat;
    position: absolute;
    top: calc(50% - 8px);
}
.head08 .inner::before{
    left: 10px;
}
.head08 .inner::after{
    right: 10px;
}

.head08.yellow{    background: #e9651f;}
.head08.yellow .inner{    background: #ffbb33;}
.head08.purple{    background: #8f5ae1;}
.head08.purple .inner{    background: #bdc5ed;}
.head08.green{    background: #07a587; color: #000;}
.head08.pink{    background: #ff6695;}

.head08.head08Pattern01 .left01,
.head08.head08Pattern01 .right01{
    width: 158px;
    aspect-ratio: 1 / 1 ;
    top: 48%;
    z-index: -1;
}
.head08.head08Pattern01 .left01{
    background: url("../images/culture/parts_01.png") left top / contain no-repeat;
    left: 0;
    transform: translate(-90%,0);
}
.head08.head08Pattern01 .right01{
    background: url("../images/culture/parts_02.png") left top / contain no-repeat;
    right: 0;
    transform: translate(90%,0);
}
.head08.head08Pattern01 .left02,
.head08.head08Pattern01 .right02{
    width: 14px;
    background: url("../images/culture/parts_03.png") center top / contain repeat-y;
    height: 100px;
    z-index: -1;
    bottom: 0;
    transform: translate(0,95%);
}
.head08.head08Pattern01 .left02{
    left: 10%;
}
.head08.head08Pattern01 .right02{
    right: 10%;
}

.head08.head08Pattern02 .left01,
.head08.head08Pattern02 .right01{    
    width: 14px;
    background: url("../images/culture/parts_03.png") center top / contain repeat-y;
    height: 220px;
    z-index: -1;
    top: 0;
    transform: translateY(calc(-100% + 10px));
}
.head08.head08Pattern02 .left01{
    left: 5%;
}
.head08.head08Pattern02 .right01{
    right: 5%;
}

.head08.head08Pattern03 .inner{
    padding: 0.5em 0;
}

.head08.head08Pattern03.green .inner{
    background: url(../images/common/bg_check.png) center center / 72px repeat #b2eecf;
}
.head08.head08Pattern03.yellow .inner{
    background: url(../images/common/bg_check.png) center center / 72px repeat #ffdd99;
}
.head08.head08Pattern03.pink .inner{
    background: url(../images/common/bg_check.png) center center / 72px repeat #ffd0da;
}
.head08.head08Pattern03.purple .inner{
    background: url(../images/common/bg_check.png) center center / 72px repeat #e3d6f7;
}

.head08.head08Pattern04 .left01,
.head08.head08Pattern04 .right01{
    display: block;
    width: 140px;
    aspect-ratio: 1 / 1;
    bottom: -20px;
    z-index: -1;
}
.head08.head08Pattern04 .left01{
    background: url("../images/culture/parts_11.png") right bottom / contain no-repeat;
    left: 0;
    transform: translate(-97%,0);
}
.head08.head08Pattern04 .right01{
    background: url("../images/culture/parts_10.png") left bottom / contain no-repeat;
    right: 0;
    transform: translate(97%,0);
}
.head08.head08Pattern04 .deco01{
    width: 350px;
    left: 50%;
    top: 0;
    transform: translate(-50%,-100%);
}



/*-- lead --*/
.lead01{
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.8;
}
.lead01.pc-justify{
    text-align: justify;
    word-break: normal;
}
.lead01.pc-left{
    text-align: left;
    word-break: normal;
}

/*-- list --*/
ul.indList li {
	text-indent:-1em;
	padding-left:1em;
}
ol.decimal{
	padding-left:1.5em;
}
ol.decimal li{
	list-style:decimal;
	margin-bottom:8px;
}
ul.disc{
	padding-left:1.5em;
}
ul.disc li{
	list-style:disc;
	margin-bottom:8px;
    display: list-item !important;
}

.list01 li{
    margin-bottom: 1.5em;
}
.list01 li strong{
    color: #00893e;
}

/*-- button --*/

.btn01.widthAuto{
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.inrNav ul li a,
.btn01 a,
.btn01 .btn01Inr{
    padding: 18px 18px 15px 22px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    transition: .4s;
}
.inrNav ul li a {
    padding: 14px 10px 13px 24px;
}
.inrNav ul li a span,
.btn01 a span,
.btn01 a img,
.btn01 .btn01Inr span,
.btn01 .btn01Inr img{
    z-index: 1;
    position: relative;
    line-height: 1;
    letter-spacing: 0.01em;
}
.inrNav ul li a::before,
.inrNav ul li a::after,
.btn01 a::before,
.btn01 a::after,
.btn01 .btn01Inr::before,
.btn01 .btn01Inr::after{
    content: "";
    display: block;
    background: #ffbb33;
    border: 2px solid #000;
    border-radius: 100px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: .4s;
}
.inrNav ul li a::before,
.btn01 a::before,
.btn01 .btn01Inr::before{
    z-index: 1;
}
.inrNav ul li a::after,
.btn01 a::after,
.btn01 .btn01Inr::after{
    background: #e9651f;
    top: 4px;
    z-index: 0;
}
.inrNav ul li a img,
.btn01 a img,
.btn01 .btn01Inr img{
    width: 1em;
    margin-right: 0.5em;
    display: inline-block;
}
#header .btn01 a img{
    width: 0.8em;
}

.linkArrow01,
.linkArrow02{
    background: #e9651f;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    border-radius: 100px;
    display: block;
    border: 2px solid #000;
    margin-left: 1.5em;
    flex-shrink: 0;
}
.linkArrow02{
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    background: #ffbb33;
}
.linkArrow01::before,
.linkArrow02::before{
    content: "";
    display: block;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    background: url("../images/common/arrow01.svg") center center / contain no-repeat;
}
.linkArrow02:not(.right)::before{
    transform: translate(-50%, -50%) rotate(90deg);
}
.linkArrow01.window::before{
    background: url("../images/common/window_01.svg") center center / contain no-repeat;
}

.inrNav ul li a .linkArrow01{
    margin-left: 0.8em;
    transform: rotate(90deg);
}

.link01 a{
    display: flex;
    padding-left: 1.5em;
    position: relative;
    line-height: 1.2;
    transition: .4s;
}
.link01 a::before{
    content: "";
    width: 1em;
    height: 1em;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0.15em;
    background: url("../images/common/arrow01.svg") center center / contain no-repeat;
    transition: .4s;
}
.link01.window a::before{
    background: url("../images/common/window.svg") center center / contain no-repeat;
}
.link01.window.white a::before{
    background: url("../images/common/window_white.svg") center center / contain no-repeat;
}
#footer .link01.window a::before,
#footer .link01.window.white a::before{
    background: url("../images/common/window_white.svg") center center / contain no-repeat;
}

.link02 a{
    position: relative;
    line-height: 1.2;
    transition: .4s;
    color: #00893e;
    padding-right: 1.2em;
    padding-bottom: 5px;
    font-weight: bold;
}
.link02 a::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #00893e;
    position: absolute;
    left: 0;
    bottom: 0;
}
.link02 a .linkArrow02{
    position: absolute;
    right: 0;
    top: 3px;
}

/*-- spOverflow --*/
.spOverflow{
    position: relative;
}




/*-- table --*/
.table01 > dl{
    display: flex;
    position: relative;
}
.table01 > dl > dt{
    width: 25%;
    position: relative;
    padding: 30px 0;
    font-weight: 700;
    color: #00893e;
    background: #eff8ea;
    text-align: center;
}
.table01 > dl > dd{
    width: 75%;
    position: relative;
    padding: 30px 0 30px 20px;    
}
.table01 > dl:first-child::before,
.table01 > dl::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    z-index: 1;
}
.table01 > dl:first-child::before{
    top: 0;
    bottom: auto;
}


/*-- bg --*/
.bg-green{
    background: url("../images/interview/bg_stripe_green.jpg") left top / 20px repeat-x, url("../images/interview/bg_stripe_green.jpg") left bottom / 20px repeat-x, #00a550;
    position: relative;
    border-radius: 30px;
    width: calc(100% - 120px);
    margin: 0 auto;
    padding: 120px 60px;
}
.bg-green .head01 span{
    color: #fff;
}
.bg-green .head01::after{
    background: #fff;
}
.bg-green .head01 .en{
    opacity: 0.7;
}


/*-- box --*/

.inrWhiteBox{
    background: #fff;
    padding: 100px;
    max-width: 1080px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 30px;
}

.max1200 .inrWhiteBox{
    width: 100%;
}

.frameBox{
    border: 2px solid #000;
    background: #07a587;
    padding: min(10px,1.6vw);
    border-radius: 30px;
}

.frameBox.purple{
    background: #adb7e8;
}
.frameBox.pink{
    background: #ff6695;
}

.frameBox > .inner{
    border-radius: 20px;
    background: #fff;
    border: 2px solid #000;
    padding: min(60px,6.5vw);
    position: relative;
}
.frameBox.frameBoxPattern02 > .inner{
    padding: min(50px,6vw);
}
.frameBox.thinFrame{
    padding: 3px;
}
.frameBox.thinFrame > .inner{
    border-radius: 27px;
}
.frameBox.frameBoxPattern02.green{
    background: #07a587;
    color: #000;
}
.frameBox.frameBoxPattern02.green > .inner{
    background: url("../images/common/bg_check.png") left top / 72px repeat #c2f1d9;
}
.frameBox.frameBoxPattern02.pink{
    background: #ff6695;
}
.frameBox.frameBoxPattern02.pink > .inner{
    background: url("../images/common/bg_check.png") left top / 72px repeat #ffdae1;
}
.frameBox.frameBoxPattern02.yellow{
    background: #e9651f;
}
.frameBox.frameBoxPattern02.yellow > .inner{
    background: url("../images/common/bg_check.png") left top / 72px repeat #ffe4ad;
}
.frameBox.frameBoxPattern02.purple{
    background: #8f5ae1;
}
.frameBox.frameBoxPattern02.purple > .inner{
    background: url("../images/common/bg_check.png") left top / 72px repeat #dee2f6;
}

/*-- bg --*/
.bg01{
    background: url("../images/common/bg_factory_01.png") center top / 1432px repeat-x;
    padding-top: 100px;
    position: relative;
    z-index: 1
}


.bg02,
.bg03{
    position: relative;
    padding-top: 100px;
    margin-top: 100px;
}
.bg03::before,
.bg02::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../images/common/bg_factory_02.png") center top / 1320px repeat-x;
}

.bg03::before{
    background: url("../images/common/bg_factory_03.png") center top / 2500px repeat-x;
}

/*-- spOverflow --*/
.spOverflow{
    position: relative;
}


/*-- anchorLinkList --*/
.anchorLinkList{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 60px;
}
.anchorLinkList li{
    width: calc(25% - 10px);
}
.anchorLinkList li a{
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    position: relative;
    transition: .4s;
    font-size: 18px;
    font-weight: bold;
    color: #00893e;
    line-height: 1.5;
    white-space: nowrap;
}
.anchorLinkList li a::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background: #00893e;
    position: absolute;
    left: 0;
    bottom: 0;
}

.anchorLinkList li a .linkArrow02{
    margin-top: 0.25em;
}

/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/

#mainTitle .slidein,
.out.slidein,
.out .slidein{
    opacity: 0;
}

#mainTitle .slidein,
.in.slidein,
.in .slidein{
    animation: slidein 1s ease forwards;
}

@keyframes slidein{
    0%{ transform: translate(0,10px); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}

#mainTitle .slideinToRight,
.out.slideinToRight,
.out .slideinToRight{
    opacity: 0;
}

#mainTitle .slideinToRight,
.in.slideinToRight,
.in .slideinToRight{
    animation: slideinToRight 1s ease forwards;
}

@keyframes slideinToRight{
    0%{ transform: translate(-50px,0); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}

#mainTitle .slideinToLeft,
.out.slideinToLeft,
.out .slideinToLeft{
    opacity: 0;
}

#mainTitle .slideinToLeft,
.in.slideinToLeft,
.in .slideinToLeft{
    animation: slideinToLeft 1s ease forwards;
}

@keyframes slideinToLeft{
    0%{ transform: translate(50px,0); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}

.clip01 {
    transition: 1s;
    clip-path: inset(0 100% 0 0);
}
.in .clip01,
.in.clip01{
    clip-path: inset(0 0 0 0);
}

.clip02 {
    transition: .4s;
    clip-path: inset(50% 50% 50% 50%);
}
.in .clip02,
.in.clip02{
    clip-path: inset(0 0 0 0);
}

.fadein{
    opacity: 0;
}
.in.fadein,
.in .fadein,
#mv .fadein,
#mainTitle .fadein{
    animation: fadein 1s ease forwards;
}

@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1; }
}

.delay02{ animation-delay: 0.2s !important;}
.delay04{ animation-delay: 0.4s!important;}
.delay06{ animation-delay: 0.6s!important;}
.delay08{ animation-delay: 0.8s !important;}
.delay10{ animation-delay: 1s !important;}
.delay12{ animation-delay: 1.2s!important;}
.delay14{ animation-delay: 1.4s!important;}
.delay16{ animation-delay: 1.6s!important;}
.delay18{ animation-delay: 1.8s!important;}
.delay20{ animation-delay: 2.0s!important;}
.delay22{ animation-delay: 2.2s!important;}
.delay24{ animation-delay: 2.4s!important;}
.delay26{ animation-delay: 2.6s!important;}
.delay28{ animation-delay: 2.8s!important;}
.delay30{ animation-delay: 3.0s!important;}

.clip01.delay02{ transition-delay: 0.2s !important;}
.clip01.delay04{ transition-delay: 0.4s !important;}
.clip01.delay06{ transition-delay: 0.6s !important;}
.clip01.delay08{ transition-delay: 0.8s !important;}
.clip01.delay10{ transition-delay: 1s !important;}


@keyframes strech {
	0% { transform: scale(100%,100%);}
	50% { transform: scale(20%,100%);}
	100% { transform: scale(100%,100%);}
}

.bounce{
    opacity: 0;
}
#mv .bounce,
#mainTitle .bounce,
.in .bounce,
.in.bounce{
    animation: bounce02 1.2s ease forwards;
}

@keyframes bounce {
    0%, 20%, 53%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }
    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -8px, 0) scaleY(1.03);
    }
    80% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0) scaleY(.95);
    }
    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

@keyframes bounce02 {
    0%{
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
        opacity: 0;
    }
    20%{
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
    }
    40%, 50% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -60px, 0) scaleY(1.08);
    }
    53%{
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
    }
    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0) scaleY(1.03);
    }
    80% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0) scaleY(.95);
    }
    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
        opacity: 1
    }
}


@keyframes bounce03 {
    0%, 20%, 53%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -5px, 0) scaleY(1.05);
    }
    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -2px, 0) scaleY(1.03);
    }
    80% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0) scaleY(.95);
    }
    90% {
        transform: translate3d(0, -1px, 0) scaleY(1.02);
    }
}


@keyframes clip-to-right {
	0% { clip-path: inset(0 100% 0 0);}
	100% { clip-path: inset(0 0 0 0); }
}
@keyframes clip-to-left {
	0% { clip-path: inset(0 0 0 100%);}
	100% { clip-path: inset(0 0 0 0); }
}
@keyframes clip-to-bottom {
	0% { clip-path: inset(0 0 100% 0);}
	100% { clip-path: inset(0 0 0 0); }
}

.hop{
    animation: hop 4s ease-in-out infinite;
}
@keyframes hop {
  0%, 5%, 10%, 15%, 20%, 100% {
    transform: translateY(0);
  }

  /* 1回目のジャンプ */
  2.5% {
    transform: translateY(-25px);
  }
  5% {
    transform: translateY(0);
  }

  /* 2回目のジャンプ */
  7.5% {
    transform: translateY(-18px);
  }
  10% {
    transform: translateY(0);
  }

  /* 着地してからは3秒の休憩 */
  20%, 100% {
    transform: translateY(0) ;
  }
}

.zoomInUp{
    opacity: 0;
    transform: scale(0);
}
#mainTitle .zoomInUp,
.in .zoomInUp,
.in.zoomInUp{
    animation: zoomInUp .4s cubic-bezier(0.78, 0.11, 0.26, 1.23) forwards;
}

@keyframes zoomInUp {
	0% { transform: scale(0) translate(0,10%); opacity: 0;}
	98% { transform: scale(1.02) translate(0,-1%); opacity: 1;}
	100% { transform: scale(1) translate(0,0%); opacity: 1;}
}

@keyframes slide {
	0% { transform: translateX(10px); opacity: 0;}
	3% { transform: translateX(10px); opacity: 1;}
	100% { transform: translateX(-10px); opacity: 0; }
}


@keyframes moveBelt {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -78px; /* 画像1枚分ずらす */
  }
}
@keyframes moveBelt-sp {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -55px;
  }
}

.appearsToTopLeft{
    opacity: 0;
    transform: scale(0);
}
#mainTitle .appearsToTopLeft,
.in .appearsToTopLeft,
.in.appearsToTopLeft{
    animation: appearsToTopLeft 1s cubic-bezier(0.78, 0.11, 0.26, 1.23) forwards;
}

@keyframes appearsToTopLeft {
	0% { transform: scale(0) translate(15%,15%); opacity: 0;}
	98% { transform: scale(1.02) translate(0,-1%); opacity: 1;}
	100% { transform: scale(1) translate(0,0%); opacity: 1;}
}

.appearsToTopRight{
    opacity: 0;
    transform: scale(0);
}
#mainTitle .appearsToTopRight,
.in .appearsToTopRight,
.in.appearsToTopRight{
    animation: appearsToTopRight 1s cubic-bezier(0.78, 0.11, 0.26, 1.23) forwards;
}

@keyframes appearsToTopRight {
	0% { transform: scale(0) translate(-15%,15%); opacity: 0;}
	98% { transform: scale(1.02) translate(0,-1%); opacity: 1;}
	100% { transform: scale(1) translate(0,0%); opacity: 1;}
}


/*----------------------------------------------------
	☆901以上　PCのみ & HOVER
----------------------------------------------------*/

@media screen and (min-width:901px) {
    
	
    /*--- bace pc hover ---*/
    
    a.link:hover{
        text-decoration: none;
    }
    
    .linkArrow01,
    .linkArrow01::before,
    .inrNav ul li a,
    .anchorLinkList a:hover .linkArrow02{
        transition: .4s;
    }
    .inrNav a:hover .linkArrow01{
        background: #ffbb33;
    }
    .anchorLinkList a:hover .linkArrow02{
        background: #fff;
        transform: translate(0,5px);
    }
    
    /*#header .entryBtn a:hover{        
        animation: bounce03 0.8s ease forwards;
    }*/
    #header .entryBtn a:hover img{
        transform: translate(0,6px);
    }
    
    
    
    #header .menuBtn #nav-open:hover{        
        background: #fff;
    }
    #header .menuBtn #nav-open:hover .border{
        background: #000;
    }
    #header .menuBtn #nav-open:hover .border01{
        transform: translateY(-3px);
    }
    #header .menuBtn #nav-open:hover .border02{
        transform: translateY(3px);
    }
    
    /*#footer .entry a:hover{        
        animation: bounce03 0.8s ease forwards;
    }*/
    #footer .entry a:hover img{
        transform: translateY(7px);
    }
    #gnav > ul > li ul li a:hover,
    #footer .footerInr .footerLinkList > ul > li ul li a:hover{
        /*animation: bounce03 0.6s ease forwards;*/
        transform: translateX(10px);
        color: #ffbb33;
    }
    
    /*.inrNav ul li:hover a,
    .btn01:hover a,
    #top a:hover .btn01{
        animation: bounce03 0.8s ease forwards;
    }*/
    .inrNav ul li a:hover,
    .btn01 a:hover,
    #top a:hover .btn01 .btn01Inr{
        transform: translateY(4px);
    }
    .inrNav ul li a::hover::before,
    .btn01 a:hover::before,
    #top a:hover .btn01 .btn01Inr::before{        
        background: #e9651f;
    }
    .inrNav ul li a:hover::after,
    .btn01 a:hover::after,
    #top a:hover .btn01 .btn01Inr::after{        
        transform: translateY(-4px);
    }
    .inrNav ul li a:hover .linkArrow01,
    .btn01 a:hover .linkArrow01,
    #top a:hover .btn01 .btn01Inr .linkArrow01{
        background: #ffbb33;
    }
    
    .link01 a:hover{
        transform: translateX(10px);
        opacity: 0.7;
    }
    
    .link02 a::after,
    .link02 a .linkArrow02{
        transition: 0.4s;
        transform-origin: right center;
    }
    .link02 a:hover .linkArrow02{
        transform: translate(5px);
    }
    .link02 a:hover::after{
        transform: scale(0,1);
    }
    
}


/*----------------------------------------------------
	☆UNDER 1500
----------------------------------------------------*/

@media screen and (max-width:1500px) {   
    .head0801{
        width: 80%;
    }
    .head08.head08Pattern01 .left01{
        left: -5vw;
        transform: translate(0,0);
    }
    .head08.head08Pattern01 .right01{
        right: -5vw;
        transform: translate(0,0);
    }

}



/*----------------------------------------------------
	☆UNDER 1350
----------------------------------------------------*/

@media screen and (max-width:1350px) {
    
    .head08.head08Pattern04 .left01,
    .head08.head08Pattern04 .right01{
        width: 14px;
        background: url(../images/culture/parts_03.png) center top / contain repeat-y;
        height: 100px;
        aspect-ratio: auto;
        z-index: -1;
        bottom: 0;
        transform: translate(0, 20px);
    }
    .head08.head08Pattern04 .left01{
        left: 10%;
    }
    .head08.head08Pattern04 .right01{
        right: 10%;
    }
}


/*----------------------------------------------------
	☆UNDER 1200
----------------------------------------------------*/

@media screen and (max-width:1200px) {
    
    body {
	    font-size: 15px;
    }
    
    #footer::before{
        left: auto;
        right: 0;
    }
    
    #gnav > ul > li .categoryTitle{
        font-size: 1.6vw;
    }
    #gnav > ul > li ul li a{
        font-size: 1.3vw;
    }
    
    /*----------------------------------------------------
        ☆COMPONENT
    ----------------------------------------------------*/
    
    /*--- head ---*/
    .head01 .jp {
        font-size: 26px;
    }
    .head04{
        margin-bottom: 30px;
    }
    .head04 .jp{
        font-size: 26px;
    }
    .head08.head08Pattern01 .left01,
    .head08.head08Pattern01 .right01{
        display: none;
    }
    /*--- iconList ---*/
    
    /*--- section ---*/
    #contents .section {
        padding: 100px 0;
    }
    
    /*----------------------------------------------------
        ☆INNER BASE PARTS
    ----------------------------------------------------*/

    /*-- mainTitle --*/
    #mainTitle .mainTitleInr{
        padding: 8px;
    }
    #mainTitle .title .en {
        font-size: 80px;
    }
    #mainTitle .title .jp {
        font-size: 20px;
    }
    .inrNav{
        margin-top: -20px;
    }
    .inrNav ul li:not(:last-child) {
        margin-right: 15px;
    }
    .inrNav ul li a {
        padding: 12px 6px 10px 20px;
        font-size: 14px;
    }
    
    /*-- frameBox --*/
    .frameBox.frameBoxPattern02{
        padding: 5px;
        width: 90%;
    }
    .frameBox.frameBoxPattern02 > .inner{
        border-radius: 25px;
    }
    
    
    
}


/*----------------------------------------------------
	☆UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {
    
    body {
	    font-size:14px;
    }
    
    .tab{ display:block;}
    .pc, .pc-inline{ display:none;}
    
    /*----------------------------------------------------
	    ☆BASE CONTENTS
    ----------------------------------------------------*/
    
    /*--- header ---*/

    #header .headerL, #nav-content .headerL {
        height: 60px;
    }
    
    #header .headerLogo,
    #nav-content .headerLogo {
        max-width: 150px;
        padding: 18px;
    }
    #header .sitename, #nav-content .sitename {
        padding: 0 18px;
        font-size: 11px;
    }
    #header .menuBtn, .nav-close{
        width: 60px;
        height: 60px;
    }
    #header .entryBtn {
        width: 80px;
        margin: 14px 10px 0 15px;
    }
    #header .entryBtn a::after{
        top: -2px;
    }
    
    /*--- footer ---*/
    #copyBox {
        padding: 20% 12% calc(20% + 20px);
        background: url(../images/common/bg_footer_copy_sp.png) center top / 100% no-repeat;
        position: relative;
        margin-bottom: -20px;
    }
    
    #footer::before{
        display: none;
    }
    
    #footer .entry {
        max-width: 230px;
    }
    #footer .footerInr{
        padding-top: 0;
    }
    #gnav,
    #footer .footerInr .footerLinkList{
        flex-direction: column;
    }
    #gnav .logo,
    #footer .footerInr .footerLinkList .footerLogo{
        width: 100%;
    }
    #gnav > ul,
    #footer .footerInr .footerLinkList > ul{
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-top: 50px;
        margin-top: 50px;
    }
    
    #footer .footerBottom{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #footer address{
        margin-top: 20px;
        text-align: center;
    }
    #footer address small{
        text-align: center;
    }
    
    #gnav > ul > li .categoryTitle{
        font-size: max(2.2vw,16px);
    }
    #gnav > ul > li ul li a{
        font-size: max(1.8vw,12px);
    }
    
    #gnav > ul > li.corporate{
        width: 100%;
        margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    /*----------------------------------------------------
        ☆INNER BASE PARTS
    ----------------------------------------------------*/
    
    /*--- mainTitle ---*/
    
    /*----------------------------------------------------
        ☆COMPONENT
    ----------------------------------------------------*/
    
    /*--- lead ---*/
    .lead01{
        margin-bottom: 40px;
    }
    
    /*--- head ---*/
    .head01 {
        padding-bottom: 13px;
    }
    .head01::after {
        width: 40px;
        height: 2.5px;
        left: calc(50% - 20px);
    }
    .head01 .jp {
        font-size: 28px;
    }
    .head02 .title {
        font-size: 22px;
    }
    .head02 .num {
        transform: translate(-50%, -60%);
        font-size: 14px;
        padding: 3px 25px 2px;
    }
    
    .head06 {
        font-size: min(26px, 5.2vw);
    }
    
    .head080 .inner {
        font-size: 26px;
    }
    
    
    /*--- inrWhiteBox ---*/
    .inrWhiteBox {
        padding: 60px;
    }
    
    /*--- btn ---*/
    .inrNav ul li a,
    .btn01 a,
    .btn01 .btn01Inr {
        padding: 13px 13px 11px 20px;
        font-size: 14px;
    }    
    .inrNav ul li a img,
    .btn01 a img,
    .btn01 .btn01Inr img {
        margin-right: 0.4em;
    }
    .inrNav ul li a span,
    .btn01 a span,
    .btn01 a img,
    .btn01 .btn01Inr span,
    .btn01 .btn01Inr img{
        letter-spacing: 0.025em;
    }
    .linkArrow01 {
        width: 1.1em;
        height: 1.1em;
        margin-left: 0.8em;
    }   
    
    
    /*--- bg ---*/
    #contents .section.bg01,
    #contents .section.bg02,
    #contents .section.bg03{
        padding-top: 60px;
    }
    .bg01{        
        background-size: 100% auto;
        padding-top: 60px;
    }
    .bg02::before{
        background-size: 100% auto;
        padding-top: 60px;
    }
    .bg03{        
        background-size: 100% auto;
        padding-top: 60px;
    }
    
    
    /*--- anchorLinkList ---*/
    .anchorLinkList{}
    .anchorLinkList li {
        width: calc(50% - 10px);
    }
    .anchorLinkList li a{
        font-size: 16px;
    }
    
    
    
}


/*----------------------------------------------------
	☆UNDER 750
----------------------------------------------------*/

@media screen and (max-width:750px) {
    
    /*----------------------------------------------------
	    ☆BASE CONTENTS
    ----------------------------------------------------*/
    
    /*--- header ---*/

    /*--- footer ---*/
    #gnav > ul,
    #footer .footerInr .footerLinkList > ul {
        justify-content: space-between;
    }
    #gnav > ul > li,
    #gnav > ul > li:nth-child(4),
    #footer .footerInr .footerLinkList > ul > li,
    #footer .footerInr .footerLinkList > ul > li:nth-child(4) {
        width: calc((100% - (30px * 1)) / 2);
        margin-right: 0;
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    
    /*----------------------------------------------------
        ☆INNER BASE PARTS
    ----------------------------------------------------*/
    
    /*--- mainTitle ---*/
    
    /*----------------------------------------------------
        ☆COMPONENT
    ----------------------------------------------------*/
    
}
    
/*----------------------------------------------------
	☆UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    body {
        font-size: 14px;
    }
    
    .sp{ display:block;}
    
    body::before, body::after {
        width: calc(100% - 28px);
        height: calc(100vh - 28px);
        border: 14px solid #00a550;
    }
    
    .pin {
        width: 10px;
        height: 10px;
    }
    .pin:nth-child(1 of .pin){
        left: 6px;
        top: 6px;
    }
    .pin:nth-child(2 of .pin){
        right: 6px;
        top: 6px;
    }
    .pin:nth-child(3 of .pin){
        left: 6px;
        bottom: 6px;
    }
    .pin:nth-child(4 of .pin){
        right: 6px;
        bottom: 6px;
    }
	
	.bg-green{
		width: 85%;
		background: url(../images/interview/bg_stripe_green.jpg) left top / 15px repeat-x, url(../images/interview/bg_stripe_green.jpg) left bottom / 15px repeat-x, #00a550;
		border-radius: 20px;
		padding: 70px 0;
	}
    
    .r30{ border-radius: 20px;}
    .r25{ border-radius: 15px;}
    .r20{ border-radius: 15px;}
    
	
    /*----------------------------------------------------
	    ☆BASE CONTENTS
    ----------------------------------------------------*/
    
    #pagetop {
        width: 44px;
        height: 44px;
    }
    
    /*--- header ---*/
    #header .headerL, #nav-content .headerL {
        height: 50px;
    }
    #header .menuBtn, .nav-close {
        width: 50px;
        height: 50px;
    }
    #header .headerLogo, #nav-content .headerLogo {
        max-width: 120px;
        padding: 10px;
    }    
    #header .sitename, #nav-content .sitename {
        padding: 0 10px;
        font-size: 9px;
        letter-spacing: 0.025em;
    }
    #header .tagsearch{
        display: none;
    }
    #header .entryBtn {
        width: 70px;
    }
    #header .entryBtn a::after {
        top: -9px;
    }
    
    #header .btn01 a {
        padding: 10px 8px 8px 18px;
        font-size: 13px;
    }
    #header .btn01 a .linkArrow01 {
        margin-left: 0.2em;
    }
    #header .btn01 a img{
        display: none;
    }
    
    #nav-content .nav-inner{
        display: block;
        padding-top: 80px;
    }
    

    /*--- footer ---*/
	#copyBox{
		overflow: hidden;
	}
	
    #footer {
        width: calc(100% - 28px - 28px);
        border-radius: 20px;
        margin: 0 auto 28px;
    }
    #footer .entry {
        width: 38%;
    }
    #copyBox .sub {
        margin: 3% auto 0;
    }
	#footer .footerInr{
		overflow: hidden;
	}
	#footer::before,
	#footer::after{
		display: none;
	}
    #gnav, #footer .footerInr .footerLinkList {
        padding: 30px 0;
    }
    #gnav .logo img,
    #footer .footerInr .footerLinkList .footerLogo img {
        max-width: 140px;
    }
    #gnav .logo .jp,
    #footer .footerInr .footerLinkList .footerLogo .jp{
        font-size: 12px;
    }
    #gnav .mypage {
        margin-top: 20px;
    }
    #gnav .mypage a{
        color: #000;
    }
    #gnav > ul, #footer .footerInr .footerLinkList > ul {
        padding-top: 30px;
        margin-top: 30px;
    }
    #gnav > ul > li,
    #gnav > ul > li:nth-child(4),
    #footer .footerInr .footerLinkList > ul > li,
    #footer .footerInr .footerLinkList > ul > li:nth-child(4) {
        width: 100%;
    }
    #gnav > ul > li .categoryTitle,
    #footer .footerInr .footerLinkList > ul > li .categoryTitle {
        margin-bottom: 0.5em;
    }
    #gnav > ul > li ul li + li,
    #footer .footerInr .footerLinkList > ul > li ul li + li {
        margin-top: 0.15em;
    }
    #gnav > ul > li:nth-child(n + 4), #footer .footerInr .footerLinkList > ul > li:nth-child(n + 4){
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    #gnav > ul > li ul li a, #footer .footerInr .footerLinkList > ul > li ul li a {
        font-size: 13px;
    }
    
    #gnav, #footer .footerInr .footerLinkList{
        border-bottom: none;
        padding-bottom: 0;
    }
    #footer .footerBtmLeft{
        justify-content: center;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 10px;
    }
    #footer .footerBtmLeft .title{
        margin:0;
    }
    #gnav{
        padding: 0 0 80px 0;
    }
     #gnav > ul > li.corporate{
        width: 100%;
        margin-top: 0;
    padding-top: 0;
    border-top: none;
    }
    
    
    /*----------------------------------------------------
        ☆INNER BASE PARTS
    ----------------------------------------------------*/
    
    /*-- -mainTitle ---*/
    #mainTitle {
        margin-top: 70px;
        width: calc(100% - 28px - 20px);
    }
    #mainTitle .mainTitleInr{
        padding: 4px;
    }
    #mainTitle .mainTitleInr .inner02 {
        padding: 40px 0;
        border-radius: 24px;
    }
    #mainTitle .title {
        padding-top: 60px;
    }
    #mainTitle .title .en {
        font-size: 11vw;
        -webkit-text-stroke: 1.5px black;
    }
    #mainTitle .title .en::before{
        -webkit-text-stroke: 1.5px black;
    }
    #mainTitle .title .jp {
        font-size: 14px;
    }
    #mainTitle .title::before {
        width: 55px;
        height: 55px;
    }
    
    .inrNav{
        top: calc(100% - 20px);
    }
    .inrNav ul {
        top: 0;
        transform: translate(0);
        gap: 10px;
    }
    .inrNav ul li{
        margin: 0 !important;
    }
    .inrNav ul li a {
        padding: 8px 0px 5px 12px;
        font-size: 11px;
    }
    .inrNav ul li a .linkArrow01 {
        margin-left: 0.4em;
        border: 1.5px solid #000;
    }
    .inrNav ul li a {
    }
    .inrNav ul li a::after,
    .btn01 a::after ,
    .btn01 .btn01Inr::after {
        top: 3px;
    }
    .inrNav ul li:not(:last-child) {
        margin-right: 10px;
        margin-bottom: 12px;
    }
    
    
    /*----------------------------------------------------
        ☆COMPONENT
    ----------------------------------------------------*/
    
    /*--- section ---*/
    #contents .section {
        padding: 60px 0;
    }
    #contents .section:last-child {
        padding-bottom: 20px;
    }
    
    /*--- lead ---*/
    .lead01{
        margin-bottom: 30px;
    }
    
    /*--- head ---*/
    .head01 {
        padding-bottom: 14px;
        margin-bottom: 20px;
    }
    .head01 .jp {
        font-size: 24px;
    }
    .head01::after{
        width: 30px;
        left: calc(50% - 15px);
        height: 2px;
    }
    
    .head02 {
        padding: 3px;
        border-radius: 20px;
        transform: translateY(-30px);
        position: relative;
        z-index: 1;
    }
    .head02 .inner {
        border-radius: 16px;
        padding: 20px 15px;
    }
    .head02 .title {
        font-size: 18px;
        line-height: 1.5;
    }
    
    .head03 .jp{
        font-size: 14px;
    }
    .head03 .en{
        font-size: 50px;
        -webkit-text-stroke: 1.5px black;
    }
    .head03 .en > span {
        -webkit-text-stroke: 1.5px black;
    }
    
    .head04 .jp {
        font-size: 22px;
    }
    
    .head07 {
        margin: 0 auto 10px;
        font-size: 16px;
    }
    
    .head08 {
        padding: 2px;
    }
    .head08 .inner {
        font-size: min(4.5vw, 22px);
        letter-spacing: 0.01em;
        padding: 0.7em 1.2em;
    }
    .head08 .inner::before,
    .head08 .inner::after {
        width: 10px;
        top: calc(50% - 5px);
    }
    .head08 .inner::before{
        left: 6px;
    }
    .head08 .inner::after{
        right: 6px;
    }
    .head08.head08Pattern02 .left01,
    .head08.head08Pattern02 .right01 {
        transform: translateY(calc(-100% + 20px));
    }
    
    
    /*--- inrWhiteBox ---*/
    .inrWhiteBox {
        padding: 40px 20px;
        border-radius: 20px;
    }
    
    /*-- table --*/
    .table01 > dl{
        flex-direction: column;
    }
    .table01 > dl > dt{
        width: auto;
        padding: 3px 0 3px 15px;
        margin-bottom: 10px;
        display: table;
        text-align: left;
    }
    .table01 > dl > dd{
        width: 100%;
        padding: 0 0 0 15px;
        margin-bottom: 25px;
    }
    .table01 > dl:last-child > dd{
        margin-bottom: 0;
    }
    .table01 > dl:first-child > dd::before,
    .table01 > dl:first-child > dt::before{
        display: none;
    }
    .table01 > dl > dt::after{
        top: 0;
        left: 0;
        bottom: auto;
        width: 1px;
        height: 100%;
    }
    .table01 > dl:first-child::before,
    .table01 > dl:first-child  > dd::before,
    .table01 > dl > dd::after,
    .table01 > dl:first-child::before,
    .table01 > dl::after{
        background: none;
    }
    
    .frameBox.frameBoxPattern02{
        border-radius: 20px;
        width: 95%;
    }
    .frameBox.frameBoxPattern02 .inner{
        border-radius: 15px;
        padding: 20px;
    }
    .frameBox.frameBoxPattern02.thinFrame {
        padding: 3px;
    }
    .frameBox.frameBoxPattern02.thinFrame .inner{
        border-radius: 17px;
    }
    
    
    /*-- bg --*/
    .bg01{
        background-size: 580px;
    }
    .bg03::before{
        background-size: 580px;
    }
    #contents .section.bg01, #contents .section.bg02, #contents .section.bg03 {
        padding-top: 40px;
    }
    /*-- spOverflow --*/
    .spOverflow{
		overflow-x: scroll;
		width: 100%;
		padding: 0 9% 20px;
    }
    .spOverflow .full img{
    }
    .spOverflow .image{
        margin-top: 50px;
		width: 700px;
        opacity: 0.3;
        transition: .4s;
	}
    .spOverflow .inr{
        opacity: 0.3;
        position: relative;
    }
    .spOverflow .deco img{
        width: 100%;
    }
    .spOverflow.touched .inr,
    .spOverflow.touched .image{
        opacity: 1;
    }
    .howToScroll.is-ua-sp{
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.howToScroll.is-ua-sp .howToScrollInr::after{
		content: "";
		display: block;
		width: 70%;
		height: 100%;
		position: absolute;
		left: 15%;
		top: 0;
		z-index: 2;
		background: url("../images/common/icon_swipe.svg")center center / 60% auto no-repeat;
		animation: slide 1500ms linear infinite;
		transition: all 300ms;
	}
    .howToScroll.is-ua-sp.delete,
	.howToScroll.is-ua-sp .howToScrollInr.delete {
		animation: none;
		transition: .3s;
		opacity: 0;
		visibility: hidden;
	}
    
    /*-- anchorLinkList --*/
    .anchorLinkList {
        gap: 15px;
        margin-bottom: 40px;
    }
    .anchorLinkList li{
        width: calc(50% - 8px);
    }
    .anchorLinkList li a {
        font-size: 12px;
    }
    
    .linkArrow01, .linkArrow02 {
        border: 1.5px solid #000;
    }
    
}

/*----------------------------------------------------
	☆UNDER 480
----------------------------------------------------*/

@media screen and (max-width:480px) {

    #header .mypage{
        display: none;
    }
}