@charset "utf-8";

@import url("ress.css");
@import url("base.css");
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho:wght@400;700&display=swap');

/* __________________________________________________
   common
__________________________________________________ */

html { overflow-y: scroll; _overflow: auto; font-size: 62.5%; padding: 0; margin: 0;}/**1rem=10px**/
body { overflow-x: hidden; position: relative; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 400; font-feature-settings: "palt"; letter-spacing: 0; line-height: 1.75; color: #333; padding: 0; margin: 0; font-size: 1.6rem;}

html, body { width: 100%; min-height: 100vh; position: relative;}

a { color: #333; text-decoration: none;}
a:hover { color: #333;}
a[href^="tel:"]{ display: inline-block; pointer-events: none;}

@media screen and (max-width: 767px) {
body {font-size: 1.5rem;}
a[href^="tel:"] { pointer-events: auto; text-decoration: underline; color: #6a6a6a;}
}


/* __________________________________________________
   header
__________________________________________________ */
header { width: 100%; background: #50288e; transition: .5s; margin-bottom: 20px;}
header .inner { max-width: 840px; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; margin: 0 auto;}
header .logo { width: 330px; height: 50px; background: url(../images/share/logoMark.svg) 0 0 no-repeat; background-size: 100%; text-indent: -9876em; overflow: hidden;}
header .logo a { width: 330px; height: 50px; display: block;}
header nav.gN ul { display: flex; align-items: center; justify-content: center; list-style: none;}
header nav.gN ul li { padding: 0 20px;}
header nav.gN ul li a { color: #fff; font-weight: 700;}
header a.underLine {display: inline-block; text-decoration: none; overflow: hidden; position: relative;}
header a.underLine:after { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0;left: 0;
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}
header a.underLine:hover:after { transform: translate(0, 0);}

@media screen and (max-width: 768px){
header .inner { max-width: 100%;}
header nav.gN ul { display: none;}
}

@media screen and (max-width: 560px){
header .logo a { width: 280px; height: 42px;}
header .logo { width: 280px; height: 42px;}
header .inner { max-width: 100%; height: 80px; padding: 0 20px;}
}

/*
gn
*/
#menuTrigger { display: block; width: 40px; height: 24px; cursor: pointer; z-index: 51;}
.menuIcon { position: relative; height: 18px;}
.menuIcon > div { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: .3s;}
.menuIcon > div:nth-of-type(1) { top: 0;}
.menuIcon > div:nth-of-type(2) { top: 11px;}
.menuIcon > div:nth-of-type(3) { top: 22px;}
.menuIcon.open::before { content: ""; display: block; width: 135px; height: 90px; position: absolute; top: -45px; right: -30px;}
.menuIcon.open > div { background: #333;}
.menuIcon.open > div:nth-of-type(1) { top: 8px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg); transition: .3s;}
.menuIcon.open > div:nth-of-type(2) { opacity: 0;}
.menuIcon.open > div:nth-of-type(3) { top: 8px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg); transition: .3s;}
.menuIcon span { font-size: 1.2rem; color: #fff; position: absolute; top: 30px;}
.menuIcon.open span { display: none;}

.menuBg { width: 100vw; height: 100vh; overflow-y: scroll; background: rgb(245, 245, 245); padding: 0; position: absolute; top: 0; left: 0; z-index: 50;}
.menuArea { max-width: 840px; padding: 40px 130px; margin: 0 auto;}
.menuArea nav {}
.menuArea nav.sp_gN ul { flex-direction: column; text-align: center; list-style: none;}
.menuArea nav.sp_gN li { display: block; margin-bottom: 15px;}
.menuArea nav.sp_gN li a {  color: #333;}
.menuBg { display: none;}
.fixed { position: fixed;}


@media screen and (max-width: 768px){
.menuArea { max-width: calc(100vw - 80px); padding: 40px;}
.menuIcon span { display: none;}
}

@media screen and (max-width: 640px){
.menuArea { max-width: calc(100vw - 40px); padding: 40px 20px;}
}

.snsArea { display: flex; align-items: center; justify-content: center; margin: 50px 0;}
.snsArea a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #666; border-radius: 50px; margin: 0 10px;}
.snsArea a img { width: 70%;}

/* __________________________________________________
   footer
__________________________________________________ */
footer {  width: 100%; height: 90px; z-index: 10; position: absolute; bottom: 0;}
footer ul { display: flex; align-items: center; justify-content: center; background: #50288e; list-style: none;}
footer ul li { padding: 10px 30px;}
footer nav a { color: #ddd;}
footer nav a:hover { color: #fff;}

@media screen and (max-width: 420px){
footer ul { display: block;}
footer ul li { padding: 10px; text-align: center;}
}


/*
Go to top
*/
a.bt_pageTop { display: block; width:100%; height: 40px; z-index: 10; text-align: center; padding: 0; border-radius: 30px; color: #808080;}



/* __________________________________________________
   main
__________________________________________________ */
main { width: 100%; min-height: calc(100% - 400px); position: relative; padding: 0 0 50px 0;}
main section { display: block; width: 840px; padding: 0 0 50px; margin: 0 auto 20px auto;}
main section .inner p { text-align: justify; padding-bottom: 1em;}


@media screen and (max-width: 768px){
 main section { display: block; width:100%; margin: 0 auto 20px auto;}
}

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

}

/*
button
*/
a.bt { 
display: inline-block; text-align: center; color: #333; text-decoration: none; border: 1px solid #ccc; border-radius: 3px;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
to right,#182c5b 0%, #182c5b 50%, #fff 50%, #fff 100%);
transition: background-position ease 0.4s;
}
a.bt:hover { color: #fff; background-position: 0 0;}

a.underLine {display: inline-block; text-decoration: none; overflow: hidden; position: relative;}
a.underLine:after { content: ""; width: 100%; height: 1px; background: #182c5b; position: absolute; bottom: 0;left: 0;
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}
a.underLine:hover:after { transform: translate(0, 0);}

/* __________________________________________________
   top
__________________________________________________ */

.head { background: url(/common/images/top/img_01.jpg) 0 0 no-repeat; background-size: 100%;color: #fff; padding: 90px 50px; position: relative; z-index: 0;}
.head h1 { font-size: 1.8rem; color: #fff; position: relative; margin-bottom: 30px; z-index: 1;}
.head h1:before { content: ""; width: 70px; height: 70px; background: rgba(247, 187, 20, 0.5); border-radius: 50px; position: absolute; top:-20px; left: -15px; z-index: -1;}
.head p { padding: 0 35px; text-align: justify;}

.topNavi h2 { font-size: 2rem; padding: 0; border-bottom: 3px solid #50288e; margin-bottom: 10px;}
.topNavi h2 span { background: #50288e; color: #fff; padding: 5px 10px;}

.gridArea { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; background: #fff;}
.gridArea > div { font-family: 'Zen Old Mincho', serif; background-size: 100%;}

.gridArea > div a { width: 100%; height:100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; color: #fff; padding: 110px 0; transition: .3s;}
.gridArea > div a:hover { background: rgba(0, 0, 0, 0);}
.gridArea > div a span { padding: 5px 30px; }

.gray { grid-area: 1/2/2/4; background: url(/common/images/top/img_03.jpg) 0 0 no-repeat; border-left: 2px solid #fff; border-bottom: 2px solid #fff;}
.gleenblue { grid-area: 2/2/3/2; background: url(/common/images/top/img_04.jpg) 0 0 no-repeat; border: 2px solid #fff;}
.blue { grid-area: 2/3/3/4; background: url(/common/images/top/img_05.jpg) 0 0 no-repeat; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #fff;}
.yellow { grid-area: 3/1/4/3; background: url(/common/images/top/img_06.jpg) 0 0 no-repeat; border-top: 2px solid #fff; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
.orange { grid-area: 4/1/5/2; background: url(/common/images/top/img_08.jpg) 0 0 no-repeat; border-top: 2px solid #fff; border-right: 2px solid #fff;}
.pink { grid-area: 4/2/5/3; background: url(/common/images/top/img_09.jpg) 0 0 no-repeat; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #fff;}

.gray span { background: rgba(153, 153, 153, 0.8);}
.gleenblue span { background: rgba(20, 150, 170, 0.8);}
.blue span { background: rgba(20, 119, 200, 0.8);}
.yellow span { background: rgba(210, 180, 30, 0.8);}
.orange span { background: rgba(241, 91, 36, 0.8);}
.pink span { background: rgba(230, 130, 200, 0.8);}

.gleen { grid-area: 1/1/3/2; background: url(/common/images/top/img_02.jpg) 0 0 no-repeat; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
.khaki { grid-area: 3/3/5/5; background: url(/common/images/top/img_07.jpg) 0 0 no-repeat; border-top: 2px solid #fff; border-left: 2px solid #fff;}
.gleen span { background: rgba(80, 190, 129, 0.8);}
.khaki span { background: rgba(100, 100, 10, 0.8);}
.gridArea > div.gleen a span,
.gridArea > div.khaki a span { writing-mode: vertical-rl; padding: 30px 5px;}

@media screen and (max-width: 768px){
main section { display: block; width:100%; margin: 0 auto 20px auto;}
.head { background: url(/common/images/top/img_01.jpg) center center no-repeat; background-size: cover; padding: 90px 50px;}
.gridArea > div {background-size: 150%;}
.gridArea > div a span { padding: 5px 10px;}
.gridArea > div.gleen a span,
.gridArea > div.khaki a span { padding: 10px 5px;}
}

@media screen and (max-width: 560px){
.head { padding: 40px 20px;}
.gridArea > div {background-size: 150%;}
.gridArea,
.gridArea > div { width: 100%; display: block; background-position: center center; border: none; margin-bottom: 5px;}
.gridArea > div a { padding: 50px 0; transition: .3s;}

.gridArea > div.gleen a span,
.gridArea > div.khaki a span { writing-mode: horizontal-tb;padding: 5px 10px;}
.gridArea > div a:hover { background: rgba(0, 0, 0, 0);}
.gridArea > div a span { padding: 5px 30px;}

}