@charset "utf-8";
/* CSS Document */
/*
Theme Name: ORIGINAL
Description: オリジナルテーマ
Version: 1.1
Author: 
*/

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* CLEAR FIX */
.cf:after{content: "."; display: block; height: 0;  clear: both; visibility:hidden;}
.cf{display: inline-table;} 
/* Hides from IE Mac */
* html .cf{height: 1%;}
.cf{display:block;}
/* BOXSIZING */
.boxSizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
/* iOSでのsubmitのスタイルをリセット */
input[type="submit"],input[type="button"] {border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: none; appearance: none; border: none; box-sizing: border-box; cursor: pointer;}
input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}

/* =======PRUGIN SETTINGS======= */
/* PAGE TOP */
.pagetop {z-index: 999; position: fixed;bottom: 10px;right: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.3);-moz-transform: scale(0.3);-ms-transform: scale(0.3);-o-transform: scale(0.3);transform: scale(0.3);-webkit-transition: all .4s;-moz-transition: all .4s;	-o-transition: all .4s;	transition: all .4s;}
.pagetop a {display: block;width: 50px;	height: 50px;background-color: #000;text-align: center;color: #fff;font-size: 1em;text-decoration: none;line-height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}
.pagetop.show {	opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}

/* BLOCK LINK */
.box-link{cursor:pointer;}
.box-link,
.box-link::before,
.box-link::after {-webkit-transition: all .3s;transition: all .3s;}
.box-link:hover{background:#EEE;}

/* =======WP PAGENAVI SETTINGS======= */
.wp-pagenavi {clear: both; text-align: center; margin-bottom: 100px;}
.wp-pagenavi a, .wp-pagenavi span {text-decoration: none; display:inline-block;color:#444; background-color:#EEE; padding: 8px 15px; margin:0 1px 2px; white-space: nowrap; -moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-webkit-transition: 0.2s ease-in-out;-moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;transition: 0.2s ease-in-out;}
.wp-pagenavi a:hover, .wp-pagenavi span.current {color:#FFF;background-color:#666;border-color:#666;}
.wp-pagenavi span.current {color:#FFF;background-color:#0071bd;border-color:#0071bd;font-weight: bold;}

/* =======TABLE ======= */
/* .table-col1 */
td.column-1 {white-space: nowrap; width:20%;}
.basic-table {font-size: 0.8em; width: 100%;}
.basic-table td{border: 1px solid #CCC; padding: 15px;}
.basic-table th {border: 1px solid #CCC; padding: 15px; white-space: nowrap; font-weight: bold;}

.basic-table2 {width:100%; margin-bottom: 30px;}
.basic-table2 td{border-bottom: 1px solid #CCC; padding: 15px;}
.basic-table2 th {border-bottom: 1px solid #CCC; padding: 15px; width: 10%; white-space: nowrap; font-weight: bold;}

.basic-table3 {font-size: 0.8em; width:100%; margin-bottom: 30px;}
.basic-table3 td{width:50%; border: 1px solid #CCC; padding: 15px;}

/* =======SLIDER======= */
.slick-slide {box-sizing: border-box;}
.slick-slider div { transition: none; }
#teaser .slick-next {right: 0; z-index: 999; background: #FFF; padding: 20px; display: flex; justify-content: center;}
#teaser .slick-prev {left: 0; z-index: 999; background: #FFF; padding: 20px; display: flex; justify-content: center;}

/* =======ACCORDION======= */
.accordion {margin: 50px auto;}
.toggle {display: none;}
.option {position: relative;}
.title,.content {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
.title {border-bottom: solid 1px #ccc; padding: 16px 50px 16px 16px; display: block; font-weight: bold;}
.title::after,.title::before {content: "";position: absolute;right: 26px; top: 26px; width: 2px;height: 14px; background-color: #0071bd; transition: all 0.3s;}
.title::after {transform: rotate(90deg);}
.content {max-height: 0;overflow: hidden;}
.content p {margin: 0; padding:20px;}
.toggle:checked + .title + .content {max-height: 1000px; transition: all 1.5s;}
.toggle:checked + .title::before {transform: rotate(90deg) !important;}

/* =======SELECTBOX======= */
.selectbox-2 {position: relative;}
.selectbox-2::before,.selectbox-2::after {position: absolute; content: '';  pointer-events: none;}
.selectbox-2::before {right: 0; display: inline-block; width: 2.8em; height: 2.8em; border-radius: 0 3px 3px 0;  background-color: #2589d0; content: '';}
.selectbox-2::after {position: absolute; top: 50%; right: 1.4em; transform: translate(50%, -50%) rotate(45deg); width: 6px; height: 6px; border-bottom: 3px solid #fff;border-right: 3px solid #fff; content: '';}
.selectbox-2 select {appearance: none; -webkit-appearance: none; -moz-appearance: none;  width: 50%; min-width: 230px; height: 2.8em; padding: .4em 3.6em .4em .8em; border: 2px solid #2589d0; border-radius: 3px; color: #333333; font-size: 1em; cursor: pointer;}
.selectbox-2 select:focus {outline: 1px solid #2589d0;}

#sb_instagram #sbi_load .sbi_follow_btn a {
    width: 80%;
    padding: 14px;
    font-size: 16px;
    margin-top: 30px;
}
#sb_instagram #sbi_load .sbi_follow_btn {
    display: block;
}
/* ======= BASIC ======= */
html,body { height: 100%; width: 100%; min-width: 1180px; }
body{font-family: 'Noto Sans JP', serif; color:#333; letter-spacing: 0.1em; font-size:16px;}

img {max-width: 100%; height: auto;}
a{text-decoration: none; color:#333; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
a:hover{color:#CCC;}
strong{font-weight:bold;}

div.wp-caption {max-width: 100%!important; height: auto;}

/* OTHER-STYLING */
.big{font-size:1.4em;}
.small{font-size:0.6em;}
.bg-brack{display:inline-block; background:#000; padding:10px 15px; font-size:0.8em; color:#FFF; margin-right:10px; vertical-align: super; margin:10px 0;}
.bgglay {background: #EEE; padding: 30px;}.bgglay p{margin:0;}
.bgBlue {background: #EDF7FD; padding: 5%;}
.bgWhite {background: #FFF; padding: 5%;}

.arrow-down{ margin-bottom: 30px; font-size: 3em;}
.mb0{margin-bottom:0 !important;}
.mb10{margin-bottom:10px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.pc{display:block;}
.sp {display: none;}
.menu-sp{display:none;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}

.jump{margin-top:-152px; padding-top:152px;}
.jump2 {margin-top: -180px; padding-top: 180px;}
.name {font-weight: bold; display: block; text-align: right;}

.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}

/* ======= HEADER ======= */
header{ width:100%; z-index: 9999; position: fixed; top: 0; background: #FFF; }
#header-box {}
.header-inr h1 img {width: 220px; height: auto;}
.header-inr h1 {position: fixed; left: 20px; top: 15px;}

.headBox {display: flex; justify-content: flex-end; align-items: center;}
ul.headBoxNav {display: flex; align-items: center; justify-content: center; margin-top: 9px;}
ul.headBoxNav li {position: relative; text-align: center; margin-right: 10px; letter-spacing: normal;}
ul.headBoxNav li a {font-size: 17px; font-weight: bold; color: #FFF; padding: 15px 30px 15px 50px; display: block; background: #F08E8D; border-radius: 50px;}
ul.headBoxNav li a:hover{background: #CCC;}
ul.headBoxNav li a span {display: block; font-size: 10px;}
ul.headBoxNav li i {position: absolute; left: 17px; top: 14px;}

/* global nav */
#gnav {padding-bottom: 15px;}
.nav-button-box {padding: 15px 20px; z-index: 50; vertical-align: top;}
.nav-button-box p {text-align: center; margin-top: 5px; font-weight: bold; font-size: 12px; position: absolute; bottom: -17px; color: #0071bd;}
.nav-button {display: block; cursor: pointer; }
.nav-wrap {position: fixed;left: 0;top: 0;  display:none; width: 100%; height: 100%;padding: 85px 5%; box-sizing: border-box; background: rgba(255,255,255,0.9); z-index: 10; }
.nav-wrap a{text-decoration:none; padding: 5px 0; display: inline-block; color:#222; font-size:2em; line-height: 1.5em; font-weight: bold;}
.nav-wrap a:hover{color:#CCC;}

/*メニューボタンのエフェクト*/
.nav-button span { display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.nav-button { z-index: 20; position: relative; width: 40px; height: 30px;}
.nav-button span {position: absolute; left: 0; width: 100%; height: 6px; background-color: #333;}
.nav-button span:nth-of-type(1) {top: 0;}
.nav-button span:nth-of-type(2) {top: 12px;}
.nav-button span:nth-of-type(3) {bottom: 0;}

.nav-button.active span:nth-of-type(1) {
-webkit-transform: translateY(8px) rotate(-45deg);
transform: translateY(8px) rotate(-45deg);
}
.nav-button.active span:nth-of-type(2) {
opacity: 0;
}
.nav-button.active span:nth-of-type(3) {
-webkit-transform: translateY(-16px) rotate(45deg);
transform: translateY(-16px) rotate(45deg);
}

/* ======= FOOTER ======= */
footer{width:100%; text-align: center; background: #EDF7FD; box-sizing: border-box;}
footer a {color: #333;}
.footbox {display: flex; text-align: left; justify-content: flex-start; padding: 50px 5%;}
.footbox01 {width: 40%; text-align: left; margin-right: 50px; border-right: 1px solid #CCC;  padding-right: 50px;}
.footbox01 h1 {display: flex; align-items: center; margin-bottom: 30px;}
.footbox01 h1 img {width: 300px;}
.footbox01 p {font-size: 14px; margin: 0;}
.footbox02 {font-weight: bold;}
.footbox02 ul {display: flex; flex-wrap: wrap;}
.footbox02 ul li i {color: #0071bc;}
.footbox02 ul li {margin-right: 10px; margin-bottom: 10px;}
.copyrights {text-align: center; font-size: 12px; margin-top: 0; padding: 15px 0; color: #FFF; background: #0071bc;}

.saiyoArea {background: url("img/top/saiyo.jpg")no-repeat top; text-align: center; padding: 200px 0; background-size: cover;}
.saiyoArea h3 {font-size: 32px; color: #FFF; font-weight: bold; margin-bottom: 30px;}
.saiyoArea ul {display: flex; justify-content: center; max-width: 1100px; margin: 0 auto;}
.saiyoArea ul li {width: 40%; margin: 0 1%;}
.saiyoArea ul li a { background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);
position: relative; color: #FFF; width: 100%; display: block; padding: 15px 0; border-radius: 50px;}
.saiyoArea ul li a:hover{background: rgb(30,83,158); background: linear-gradient(90deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}
.saiyoArea ul li a i {position: absolute; top: 8px; right: 11px; color: #0071bd; background: #FFF; border-radius: 50px; padding: 7px 8px;}

/*  ======= TOP =======  */
section.wrapCont{width:80%; min-width:1100px; margin:0 auto; position:relative;}

.toppage p {text-align: justify;}

.tagname {margin-top: 10px; padding: 0 20px;}
.tagname a {border: 1px solid #0071bd; font-size: 11px; border-radius: 50px; padding: 5px 10px; margin-right: 5px; margin-bottom: 5px; color: #0071bd; display: inline-block;}

h4 {color: #0071bd; font-weight: bold; font-size: 26px; margin-bottom: 30px;}

ul.topPost li {background: #FFF; padding-bottom: 20px;}
ul.topPost li img {margin-bottom: 15px;}
ul.topPost li p {font-size: 13px; padding: 0 20px;}

.topMidashi {display: flex;}
.topMidashi h4 {margin-left: -15px;}
.topMidashi img {height: 40px;}

/* TEASER */
#teaser {width: 100%; height:500px; position: relative; text-align: center; margin-top: 76px;}
.teaserInr {position: relative;}
.teaserInr img {width: 100%; height: 500px; object-fit: cover;}
.teaserBox {position: absolute; bottom: 0; padding: 30px; text-align: left; color: #FFF; background-image: linear-gradient(0deg, rgba(13, 119, 214, 0.7), rgba(255, 255, 255, 0)); width: 100%; box-sizing: border-box;}
.teaserDay {display: flex; align-items: center;margin-bottom: 10px;}
.teaserDay p:first-child {background: #FFF; padding: 5px 20px;border-radius: 50px; margin-right: 10px; font-weight: bold; color: #333;}
.teaserTitle p {font-size: 30px;}

/* STAGE01 */
#stage01 {position: relative; padding: 50px 50px; background: #FFF; max-width: 1100px; margin: 0 auto; box-sizing: border-box;}
#stage01 ul li {border-bottom: 1px solid #EEE; display: block; padding: 10px 0;}
#stage01 ul li span {margin-right: 30px;}
a.moreviewBlue {background: #0071bd; color: #FFF; padding: 10px 20px; border-radius: 50px; position: absolute; right: 50px; top: 50px; font-size: 14px;}
a.moreviewBlue:hover{background: #CCC;}

/* STAGE02 */
#stage02 {width: 90%; margin: 50px auto 50px; max-width: 1100px;}
#stage02 h4{margin:0;}
#stage02 h4 span{color:#333;}
.s02Box-1 {box-shadow: 0px 0px 5px #CCC; margin-bottom: 50px;}
.s02Box-1 ul {display: flex;}
.s02Box-1 ul li {display: flex; align-items: center; padding: 20px 50px;}
.s02Box-1 ul li:first-child img {width: 300px;}
.s02Box-1 ul li:first-child {background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}
.s02Box-2 ul li {display: flex; align-items: center; border-bottom: 1px solid #EEE; padding: 10px; }
.s02Box-2 ul li p {width: 10%; font-weight: bold; border-right: solid 1px #EEE; margin-right: 15px;}
.s02Box-2 ul li a {background: #55C1C5; font-size: 14px; color: #FFF; border-radius: 50px; padding: 5px 15px; margin-right: 10px;}
.s02Box-2 ul li a:hover{background: #CCC;}

.taglist {
    width: 90%;
}
.taglist a {
    white-space: nowrap;
    margin-bottom: 5px;
    margin-top: 5px;
    display: inline-block;
}
/* STAGE03 */
.bgGrade {position: relative; background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}
.bgGrade::before {content: '';position: absolute; top: 40%; left: 0; width: 100%; height: 60%; background: #FFF;}

#stage03 {padding: 5%; position: relative;}
#stage03 h4 {text-align: center; color: #FFF !important; padding-bottom: 30px;}
#stage03 a.moreviewBig {background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);
display: block;text-align: center; padding: 20px; border-radius: 50px; color: #FFF; position: relative; width: 50%; margin: 50px auto 0;}
#stage03 a.moreviewBig:hover {background: rgb(30,83,158); background: linear-gradient(90deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}
#stage03 a.moreviewBig i {position: absolute; top: 13px; right: 16px; color: #0071bd; background: #FFF; border-radius: 50px; padding: 7px 8px;}

/* STAGE04-5 */
#stage04 {position: relative;}
#stage05 {position: relative;}
#stage06 {position: relative;}

/* STAGE07 */
#stage07 {position: relative; background: url(img/top/welfare.jpg)no-repeat; background-size: cover; padding: 300px 5% 0px;}
#stage07::before {content: '';position: absolute; top: 80%; left: 0; width: 100%; height: 20%; background: #FFF;}
.s07-1 {box-shadow: 0px 0px 10px #CCC; background: #FFF; padding: 50px; z-index: 1; position: relative; max-width: 1100px; margin: 0 auto; box-sizing: border-box;}
.s07-1 h4 {margin-bottom: 10px;}
.s07-1 ul {display: flex;align-items: center;}
.s07-1 ul li:first-child {width: 30%; margin-right: 5%;}
.s07-1 ul li:last-child {width: 70%;}
.s07-1 ul li a.moreviewBig {background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);
display: block;text-align: center; padding: 20px; border-radius: 50px; color: #FFF; position: relative;}
.s07-1 ul li a.moreviewBig:hover {background: rgb(30,83,158); background: linear-gradient(90deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}

.s07-1 ul li a.moreviewBig i {position: absolute; top: 13px; right: 16px; color: #0071bd; background: #FFF; border-radius: 50px; padding: 7px 8px;}

/* STAGE08 */
#stage08 {position: relative; padding: 5%; position: relative;}
a.moreview {background: #FFF; border: 1px solid #0071bd; color:#FFF; padding: 10px 20px; border-radius: 50px; position: absolute; right: 0; top: 0; font-size: 14px;}
a.moreview:hover{background: #CCC;}

/* ======= PAGES ======= */
#container.page {margin: 50px 0 100px;}
#container.post {margin: 50px 0 100px;}
section.w1080 {width: 1080px; margin: 0 auto;}

.page-title {position: relative; width: 100%; padding: 350px 0 30px 5%; text-align: left; position: relative; margin: 76px auto 10px; box-sizing: border-box;}
.page-title h2 {color: #FFF; font-size: 4em; display: flex; align-items: center; z-index: 1; position: relative;}
.page-title h2 span {font-size: 20px; margin-left: 30px;}
.page-title p {margin-top: 30px;}
.page-title a {color: #39b54a;}
.page-title:before{content: '';position: absolute; top: 70%; left: 0; width: 100%; height:30%; background-image: linear-gradient(0deg, rgba(13, 119, 214, 0.7), rgba(255, 255, 255, 0));}

.page-title.about{background: url("img/h2/about.jpg")no-repeat; background-size: cover;}
.page-title.recruit{background: url("img/h2/recruit.jpg")no-repeat; background-size: cover;}
.page-title.welfare{background: url("img/h2/welfare.jpg")no-repeat; background-size: cover;}
.page-title.news{background: url("img/h2/news.jpg")no-repeat; background-size: cover;}
.page-title.pickup{background: url("img/h2/pickup.jpg")no-repeat; background-size: cover;}
.page-title.career{background: url("img/h2/career2.jpg")no-repeat; background-size: cover;}
.page-title.staff{background: url("img/h2/interview.jpg")no-repeat; background-size: cover;}
.page-title.contact{background: url("img/h2/contact3.jpg")no-repeat; background-size: cover;}
.page-title.tag{background: url("img/h2/tag.jpg")no-repeat; background-size: cover;}
.page-title.date{background: url("img/h2/date.jpg")no-repeat; background-size: cover;}

.basebox {margin-bottom: 50px; }
.basebox p {font-size: 15px;}

table.base th {white-space: nowrap; padding: 10px 20px; border: 1px solid #CCC; background:#F5F5F5;}
table.base {font-size: 0.9em; width: 100%; line-height: 2.0em;}
table.base td {border: 1px solid #CCC; padding: 10px 20px;}
table.no-line {width: 100%;}

a.baseBtn {position: relative; text-align: center; text-decoration: none; display: block; background: #1760a0;; color: #FFF;  padding: 20px; }
a.baseBtn:hover{ background: #EEE; color: #222;}
a.baseBtn i {position: absolute; right: 10px;}

ul.col2{display: flex; justify-content: space-between;flex-wrap: wrap;}
ul.col2 li{width:48%;}
ul.col2:after {content: ""; display: block; width: 32%; height: 0;}
ul.col2 img{width:100%;}
ul.col3{display: flex; justify-content: space-between;flex-wrap: wrap;}
ul.col3 li{width:32%;}
ul.col3:after {content: ""; display: block; width: 32%; height: 0;}
ul.col3 img{width:100%;}
ul.col4{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: -30px}
ul.col4 li{width:23%; margin:0 0 30px 0;}
ul.col4:after {content: ""; display: block; width: 23%; height: 0;}
ul.col4:before {content: ""; display: block; width: 23%; order: 1;}

ul.col6 li {width: 15%;}
ul.col6 {display: flex; justify-content: space-between;}

.breadCramb {padding: 0 5%; font-size: 12px; letter-spacing: normal; display: inline-block;}

.tagBox {text-align: center; margin-bottom: 50px; border-bottom: 1px solid #EEE; padding-bottom: 50px;}
.tagBox ul {display: flex; justify-content: center; flex-wrap: wrap;}
.tagBox ul li a {background: #55C1C5; padding: 5px 15px; display: inline-block; border-radius: 50px; margin: 5px; color: #FFF !important;}
.tagBox h3 {font-size: 30px; font-weight: bold; margin-bottom: 30px;}

.catPage {line-height: normal;}
.catPage img {margin-bottom: 15px;}
.catPage ul.col4 li p {font-size: 13px; padding: 0 20px;}

.monthBox {text-align: center;}

/**** about ****/
.about01 h4{text-align: center;}
.about02{max-width: 1100px; margin: 50px auto 0;}
.about02 h4{text-align: center;}
.about03 h4{text-align: center;}

ul.col2.miraiBox {text-align: center;}
ul.col2.miraiBox li {border: 1px solid #6faed6; margin-bottom: 30px; padding: 30px; box-sizing: border-box;}
ul.col2.miraiBox p {font-size: 20px; font-weight: bold; color: #6faed6;}
ul.col2.miraiBox p span {font-size: 50px;}

/**** CONTACT ****/
.table-entry table { width: 100%; margin-bottom: 30px;}
.table-entry th {border-bottom: 1px solid #CCC; padding: 20px; font-weight: bold; box-sizing: border-box;}
.table-entry td {border-bottom: 1px solid #CCC; padding: 20px; box-sizing: border-box;}
.table-entry th span {color: #0071bd; margin-left: 10px;}
.table-entry input.wpcf7-text {width: 100%; border: 1px solid #CCC;  padding: 10px; border-radius: 5px; box-sizing: border-box;}
.table-entry textarea.wpcf7-textarea {width: 100%; border: 1px solid #CCC; border-radius: 8px; padding: 20px; box-sizing: border-box;}
input.wpcf7-submit{background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);
 padding: 20px; border-radius: 50px; width: 80%; margin: 0 auto; text-align: center; display: block; color:#FFF; font-weight:bold;}
input.wpcf7-submit:hover{background:#CCC;}
.wpcf7-spinner {margin: 10px auto 0; display: block;}

/**** SAIYO ****/
.saiyoPage h4 {text-align: center;}
.saiyoPage ul.col3 {text-align: center;}

/* ======= CATEGORY ======= */
.catPage ul li {margin-bottom: 30px;}
.catPage ul li h3 {font-size: 16px; color: #333;  }

.cat-nav {text-align:center;}
.cat-nav li{margin:10px 5px; display: inline-block;}
.cat-nav li a {background: #CCC; text-decoration: none; display: inline-block; padding: 9px 15px; border-radius: 50px;}
.cat-nav li a:hover {background: #fec1c2; color:#222;}

.catGroup {display: flex;}
.catGroup p {font-size: 12px;letter-spacing: normal; margin: 5px 5px 0 0;}
.catGroup p i {color: #39b54a;}
p.catText {font-size: 12px; line-height: normal;}

/* ======= SINGLE PAGE ======= */
.singleTitle h2{margin-bottom: 0;}
h3.single-title {border-bottom: 1px solid #CCC; padding: 0 0 20px; font-size: 28px; margin-bottom: 30px;}

.cat_paging {width: 100%; position: relative; text-align: center;}
.cat_paging p {margin-bottom: 20px;}
.cat_paging a {background: #EEE; display: block; padding: 15px 0; border-radius: 5px; font-family: 'Noto Sans JP';}
.cat-back {border-top: 1px solid #CCC; padding: 50px 0; margin-top: 50px; order-bottom: 1px solid #CCC;}

.alignLeft {width: 30%; position: absolute; right: 0; top: 0;}
.alignCenter {width: 30%; margin: 0 auto;}
.alignRight {width: 30%; position: absolute; left: 0;  top: 0;}
.ouboBtn {text-align: center;}
.ouboBtn a {width: 50%; display: inline-block; padding: 20px 0; background: #f08e8d; color: #FFF; font-weight: bold; border-radius: 50px;}
.ouboBtn a:hover{background: #CCC;}

/* 投稿エリアの設定 */
#editor-area a{color:#444;}
#editor-area a:hover{background:#EEEEEE;}
#editor-area img{max-width: 100%; height:auto; display:block;}
#editor-area h4{font-size: 1.5em !important;line-height: 1.5em; margin-bottom: 25px !important;}
#editor-area h5{font-size: 1.2em; padding-bottom:10px; margin-bottom:10px; font-weight: bold; }
#editor-area h6{font-size: 1em; padding-bottom:10px; margin-bottom:10px; font-weight: bold; }
#editor-area p{margin-bottom:30px; line-height: 1.8em;}
#editor-area strong{font-weight:bold;}
#editor-area ul{margin: 30px 0 30px 5px;}
#editor-area ul li{margin: 2px 0 2px 15px;  list-style: disc;}
#editor-area table{ width: 100%; border-collapse: collapse; margin-bottom:30px;}
#editor-area table th{padding: 10px; background-color: #eee; border: 1px solid #CCC;}
#editor-area table td { padding: 10px; border: 1px solid #CCC;}
#editor-area blockquote{padding: 20px; margin-bottom:30px; background:#EEEEEE;}
#editor-area blockquote p{margin:0px !important;}
#editor-area div.borderbox{border:1px dotted #CCC; padding: 20px; margin-bottom:30px;}
#editor-area div.borderbox p{margin:0px !important;}
#editor-area div.borderbox ul{margin:0px !important;}
#editor-area img.aligncenter {margin: auto !important; display: block !important;}
#editor-area iframe::before { content: "<div>";}
#editor-area iframe::after { content: "</div>";}
#editor-area p.wp-caption-text {background: #EEE; text-align: center; font-size: 0.8em; padding: 5px;}


@media screen and (max-width: 1279px) {
 /*　================================ for ipad ================================　*/

}

@media screen and (max-width: 480px) {
 /*　================================ for iphone ================================　*/

/* HEAD */
html,body { height: 100%; width: 100%; min-width: 100%; font-size: 14px;}
section.w1080 {width:90%; margin: 0 auto;}
.pagetop{bottom:70px; right:10px; z-index: 2;}
section.wrapCont {width: 90%; min-width: auto;}	

.sp{display:block;}
.pc{display:none!important;}
.mb50 {margin-bottom: 20px;}
.mt50 {margin-top: 50px;}
.button {padding: .9em 30%;}

h3{line-height: normal;}

/* header */
#gnav {padding-bottom: 15px;}
.header-inr h1 {position: fixed; left: 20px; top: 17px;}
#header-box h1 img {width: 200px; height: auto;}
.navBox {width: 100%; height: 100vh; padding: 0 5%; min-width: 100%; box-sizing: border-box;}
.nav-wrap a {padding: 10px 0; display: block; font-size: 16px; border-bottom: 1px solid #CCC;}
ul.headBoxNav {width: 100%; position: fixed; bottom: 0; left: 0;}
ul.headBoxNav li {width: 100%; position: relative; text-align: center; margin-right: 0;}
ul.headBoxNav li a {width: 100%; padding: 22px 0; display: block; background: #F08E8D; border-radius: 0; box-sizing: border-box;font-size: 17px; font-weight: bold;}
ul.headBoxNav li i {position: unset;}

/* footer */
footer {padding: 0 0 50px;}
.footbox {margin-bottom: 0; flex-wrap: nowrap; flex-direction: column; padding: 50px 5% 0;}
.footbox01 {width: 100%; text-align: center; margin: 0 auto; padding: 0 0 30px 0; border-right: none; border-bottom: 1px solid #CCC;}
.footbox01 h1 {display: block; margin-bottom: 20px;}

.footbox02 {width: 100%; margin: 0 auto;}
.footbox02 ul {display: flex; flex-direction: column;}
.footbox02 ul li {margin-right: 0; margin-bottom: 0; border-bottom: solid 1px #CCC; padding: 15px 0;}
.footbox02 a.instagram{ padding: 15px 0; display:block; border-bottom: 1px solid #CCC;}
.copyrights {text-align: center; font-size: 10px;}

.saiyoArea {padding: 50px 0;}
.saiyoArea h3 {font-size: 24px; margin-bottom: 20px;}
.saiyoArea ul {max-width: 90%; flex-direction: column;}
.saiyoArea ul li {width: 100%; margin: 0 0 20px;}

/* 共通 */
#container{width:100%; margin:0; padding:0;}

section.toppage {padding: 50px 5%;}
.toppage h3 {font-size: 30px; margin-bottom: 30px; flex-direction: column;}
table.base th {white-space: nowrap; padding: 10px; border: none; display: block; border-bottom: 1px solid #CCC; background: #F5F5F5;}
table.base td {border: none; border-bottom: 1px solid #CCC; padding: 10px 0; display: block; box-sizing: border-box;}
.basebox {margin-bottom: 30px;}

h4 {font-size: 20px; margin-bottom: 20px; text-align: center;}


/* TEASER */
#teaser {margin-top: 76px; height: 300px;}
.teaserInr img {height: 300px; }
.teaserBox {position: absolute; bottom: 12px; padding: 10px; color: #333; background-image: none; background: #FFF; width: 95%; border-radius: 10px; margin: 0 auto;left: 0; right: 0;}
.teaserDay {margin-bottom: 3px; font-size: 10px; letter-spacing: normal;}
.teaserDay p:first-child {background: #0071bd; padding: 2px 10px; border-radius: 50px; margin-right: 10px; font-weight: normal; color: #fff;}

.teaserTitle p {font-size: 12px;}

/* STAGE01 */
#stage01 {padding: 20px 0; background: none; max-width: 100%; margin: 0 auto; box-sizing: border-box;}

a.moreviewBlue { background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);
position: relative; color: #FFF; width: 100%; display: block; padding: 15px 0; border-radius: 50px; right: unset; top: unset; text-align: center;}
a.moreviewBlue:hover{background: rgb(30,83,158); background: linear-gradient(90deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}
a.moreviewBlue i {position: absolute; top: 8px; right: 11px; color: #0071bd; background: #FFF; border-radius: 50px; padding: 7px 8px;}

#stage01 ul {margin-bottom: 30px;}
#stage01 ul li span {display: block;}

/* STAGE02 */
#stage02 {width: 90%; margin: 20px auto 20px; max-width: 100%;}
#stage02 h4 {font-size: 22px;}
.s02Box-1 {margin-bottom: 20px;}
.s02Box-1 ul {display: flex; flex-direction: column;}
.s02Box-1 ul li:firsct-child {padding: 40px 80px;}
.s02Box-2 ul li {display: block; padding: 10px 0;}
.s02Box-2 ul li p {width: 100%; display: block; border-right: none; margin-right: 0; margin-bottom: 10px;}
.s02Box-2 ul li:last-child { border: none;}
.s02Box-2 ul li a {display: inline-block; margin-bottom: 5px;}

/* STAGE03 */
#stage03 {padding: 30px 5%;}
#stage03 h4 {margin-bottom: 0;}
#stage03 ul.col4 li {width: 100%; margin: 0 0 30px 0;}
.bgGrade::before {top: 80%; height: 20%;}
#stage03 a.moreviewBig {width: 100%; box-sizing: border-box; margin: 20px auto 0;}
#stage03 ul { margin-bottom: -30px;}
#stage03 ul.topPost li p {padding: 0 20px;}

/* STAGE04 */
#stage04 {padding: 20px 0;}
.topMidashi {justify-content: center; margin-bottom: 20px;}
.topMidashi h4 {margin-left: -20px;}
a.moreview { background: rgb(30,83,158); background: linear-gradient(270deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);
position: relative; color: #FFF; width: 100%; display: block; padding: 15px 0; border-radius: 50px; right: unset; top: unset; text-align: center;}
a.moreview:hover{background: rgb(30,83,158); background: linear-gradient(90deg, rgba(30,83,158,1) 20%, rgba(46,154,204,1) 100%);}
a.moreview i {position: absolute; top: 8px; right: 11px; color: #0071bd; background: #FFF; border-radius: 50px; padding: 7px 8px;}
ul.topPost.sep li {background: none; width: 100%; margin-bottom: 15px;  padding-bottom: 15px; border-bottom: 1px solid #CCC;}
ul.topPost.sep li img {margin-bottom: 15px; width: 40%;}
ul.topPost.sep li a{display:flex;}
ul.topPost li p {font-size: 13px; padding: 0 0 0 20px;}

.sep li div.tagname a{display:inline-block; background: #FFF;}
.sep li div.tagname {display: inline-block; padding: 0; margin: 0;}
.sep li div.tagname:before {content: ""; width: 30%; display: block;  margin-right: 20px;}

/* STAGE05 */
#stage05 {padding: 20px 0;}
#stage06 {padding: 20px 0;}
#stage07 {background-size: contain; padding: 130px 5% 0px;  margin-bottom: 30px;}
.s07-1 {padding: 5% 7%; max-width: 100%;}
.s07-1 ul {align-items: flex-start; flex-direction: column;}
.s07-1 ul li:first-child {width: 90%; margin: 0 auto;}
.s07-1 ul li:last-child {margin-top: 20px; width: 100%;}
.s07-1 h4 {text-align: left;}

/* =====PAGE===== */
#contents-page {width: 100%; margin: 0 auto;}
#container.page {margin: 20px 0 50px;}

.page-title {padding: 80px 5% 10px; margin: 76px auto 10px; box-sizing: border-box;}
.page-title h2 {font-size: 20px;}
.page-title h2 span {font-size: 10px; margin-left: 10px;}
.page-title h3 {font-size: 14px; margin-bottom: 20px;}
.page-title p {margin-top: 0; font-size: 12px;}

.breadCramb {font-size: 10px;}
.basebox p {font-size: 14px;}

ul.col2 {flex-direction: column; margin-bottom: -30px;}
ul.col2 li{width:100%; margin-bottom: 30px;}
ul.col3 {flex-direction: column; margin-bottom: -30px;}
ul.col3 li{width:100%; margin-bottom: 30px;}
ul.col4 {flex-direction: column; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 20px;}
ul.col4 li {width: 100%; margin: 0 0 30px 0;}

ul.col6 {justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin-bottom: -30px;}
ul.col6 li {width: 48%; margin-bottom: 30px;}

/* ABOUT */
.about02 {max-width: 100%; margin: 30px auto 0;}
.accordion {margin: 20px auto 50px;}

/* STAFF */
.table-entry th{display:block;}
.table-entry td{display:block;}
/* ACCESS */

.ouboBtn a {width: 100%;}

/* =======CATEGORY======= */
#container.post {margin: 20px 0 50px;}

.catPage ul.col4 {display: flex; flex-direction: column;}
.catPage ul.col4 li {width: 100%; margin: 0 0 20px;}
.catPage ul li h3 {font-size: 14px; color: #333; margin-bottom: 5px; font-weight: bold;}
.catGroup p {font-size: 12px; letter-spacing: normal; margin: 5px 5px 0 0;}
p.catText {font-size: 12px; line-height: normal;}

.tagBox h3 {font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.tagBox {margin-bottom: 30px; padding-bottom: 30px;}

.monthBox .bgBlue {padding: 30px 0;}

/* =======POST AREA======= */
.singleTitle h2 {
    margin-bottom: 0;
}
.cat-postbox h3 span {display: block; font-size: 0.8em; margin-bottom: 10px;}
.cat-postbox { padding: 10px 0;}
.cat-postbox li { padding: 20px 0; font-size: 0.9em;}
.cat-nav li {margin: 5px 5px; font-size: 0.8em;}

.single-postbox {padding: 0;  margin-bottom: 30px;}
.single-postbox h3 { font-size: 1.2em; margin-bottom: 30px;}
.single-postbox h3 span {margin: 0 10px 0 0;}

.cat_paging a {font-size: 12px; letter-spacing: normal;}
.cat-back {padding: 20px 0; margin-top: 30px;}

.tag-title {margin-bottom: 30px;}
.tag-title h3 {margin-top: 30px; margin-bottom: 30px; font-size: 1.5em;}

/* =======EDITOR AREA======= */
#editor-area p {font-size: 0.9em;}
#editor-area h4 {font-size: 1.1em!important; margin-bottom: 25px!important; text-align: left;}
#editor-area h5 {font-size: 1em; margin-bottom: 10px;}
#editor-area table {border: 1px solid #CCC; border-bottom: none; box-sizing: border-box;}
#editor-area table td.column-1 {background: #EEE;}
#editor-area table td.column-1 {display: block; width: 100%!important;  box-sizing: border-box; border: none; border-bottom: 1px solid #CCC;}
#editor-area table td.column-2 {display: block; width: 100%!important;  box-sizing: border-box; border: none; border-bottom: 1px solid #CCC;}

#teaser .slick-prev:before,#teaser .slick-next:before { font-size: 18px;}

.wp-pagenavi {margin-top: 0; margin-bottom: 50px;}

.access01 ul.col2 li:nth-child(odd) {margin: 0px;}
	.access01 ul li{width:100%;}


.oshirase {margin: 0 auto 30px;}

}
/* =======reCAPTCHA======= */
.grecaptcha-badge { visibility: hidden; }

/* ================================
   青緑グラデーション（最終決定版）
   ================================ */

/* 基軸カラー */
:root {
  --main-blue: #6faed6;
  --main-green: #55cfc1;
  --main-grad: linear-gradient(90deg, #6faed6 0%, #55cfc1 100%);
  --main-grad-rev: linear-gradient(270deg, #6faed6 0%, #55cfc1 100%);
}

/* ===== グラデーションを使う主要パーツ ===== */
.saiyoArea ul li a,
.s02Box-1 ul li:first-child,
.bgGrade,
#stage03 a.moreviewBig,
.s07-1 ul li a.moreviewBig,
input.wpcf7-submit,
a.moreviewBlue,
a.moreview {
  background: var(--main-grad) !important;
}

/* hover */
.saiyoArea ul li a:hover,
#stage03 a.moreviewBig:hover,
.s07-1 ul li a.moreviewBig:hover,
a.moreviewBlue:hover,
a.moreview:hover {
  background: var(--main-grad-rev) !important;
}

/* ===== ティザー下部のかぶせ ===== */
.teaserBox {
  background-image: linear-gradient(
    0deg,
    rgba(85, 207, 193, 0.85),
    rgba(255, 255, 255, 0)
  ) !important;
}

/* ===== ページタイトルのかぶせ ===== */
.page-title:before {
  background-image: linear-gradient(
    0deg,
    rgba(85, 207, 193, 0.85),
    rgba(255, 255, 255, 0)
  ) !important;
}

/* ===== 文字・枠の青も青緑寄りに ===== */
h4,
.tagname a,
.tagBox ul li a,
.table-entry th span,
.nav-button-box p {
  color: var(--main-blue) !important;
}

.tagname a,
a.moreview {
  border-color: var(--main-blue) !important;
}

/* ===== フッター ===== */
.copyrights {
  background: var(--main-blue) !important;
}
/* ===================================
   TEASER タイトルを四角で囲う
   =================================== */

/* 下地のグラデは弱める */
.teaserBox {
  background-image: linear-gradient(
    0deg,
    rgba(85, 207, 193, 0.55),
    rgba(255, 255, 255, 0)
  ) !important;
}

/* タイトル全体 */
.teaserTitle {
  margin-top: 10px;
}

/* 四角で囲う本体 */
.teaserTitle p {
  display: inline-block;
  padding: 18px 26px;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.4;
  color: #ffffff;

  /* ← 添付画像っぽい青緑グラデ */
  background: linear-gradient(
    90deg,
    #6faed6 0%,
    #55cfc1 100%
  );

  border-radius: 16px; /* 角丸四角 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* SP調整 */
@media screen and (max-width: 480px) {
  .teaserTitle p {
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 12px;
  }
}
.tagBox ul li a {
  color: #FFF !important;
}
/* ==========================
   Splash (YAOTOKU STORY)
========================== */
.splash{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #EDF7FD;
  opacity: 1;
  pointer-events: all;
}

.splash__inner{
  text-align: center;
  padding: 24px;
}

/* SVG全体のフェードイン（控えめ） */
.splash__svg{
  opacity: 0;
  transform: translateY(8px);
  animation: splashIn 1.2s ease-out forwards;
}

/* SVGサイズ＋色 */
.splash__svg svg{
  display: block;
  width: min(80vw, 420px);
  height: auto;

  /* 左→右にゆっくり表示 */
  clip-path: inset(0 100% 0 0);
  animation: revealLeft 1.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 0.35s;
}

.splash__svg .cls-1{
  fill: #5abfbc;
}

/* フェードアウト（JSで .is-hide が付与された時） */
.splash.is-hide{
  animation: splashOut 0.9s ease forwards;
  pointer-events: none;
}

/* keyframes */
@keyframes splashIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splashOut{
  to{
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes revealLeft{
  from{
    clip-path: inset(0 100% 0 0);
  }
  to{
    clip-path: inset(0 0 0 0);
  }
}

/* motion配慮 */
@media (prefers-reduced-motion: reduce){
  .splash__svg,
  .splash.is-hide,
  .splash__svg svg{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}