/*-------------------------------------------
    header
--------------------------------------------*/
.header {
    width: 100%;
    background:rgba(255,255, 255, 1);
    position: fixed;
    top:-130px;
    z-index: 100000000;
    box-shadow:0px 0px 7px -3px #FFFFFF;
    height:80px;
    font-size: 90%;
    transition-duration: 0.7s;
}

.header.delighter.started {top:0;}

.header-navi a:link, .header-navi a:visited, .header-navi a:active {color:#fff;}
.header-logo {width: 25%;padding: 1px 0 0 5%;float: left;min-height:80px;}
.header-logo img {width: 210px;margin-top: 0.5%;}
.header-navi {width: 100%;padding:8px 5% ;background:rgba(0,0, 0, 1);text-align: center;}
.header-navi li { width:14.2%;display:block;float: left;border-right: solid 1px #000}
.header-navi li:last-child { border-right: solid 0px #000}
.header-info {
    float: left;
    width: 70%;
    padding-top:3px;
    text-align: right;
}
.header-infoBox img{
    width: 200px;
}

/*----Mediaカテゴリー----*/
.header__catlist--ul {
    width: 150px;
    position: absolute;
    opacity: 0;
    background: #000;
    text-align: left;
    margin:3px 0 0 0;
    padding:1% ;
    transition-duration: 0.5s;
}
.header__catlist--ul li{
    width: 100%;
    padding:3px 0;
    float: none;
}
.header__catlist:hover .header__catlist--ul{
    opacity: 1;
}
.header__catlist--ul a:link, .header__catlist--ul a:visited, .header__catlist--ul a:active {color:#fff;}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .header {
        max-height:90px;
        min-height:90px;
    }
    .header-logo {width: 50%; float: left;padding: 4% 0 0 3%;}
    .header-navi-sp {
        width: 100%;
        height:100vh;
        position: fixed;
        top:0;
        right: -100%;
        z-index: 100000000;
        background:rgba(0,0,0,0.8);
        color: #fff;
        text-align:left;
        padding: 5% 5% 5% 10%;
        transition-duration: 0.5s;
        overflow:scroll;
    }
    .header-navi-spAct {
        right: 0%;
    }
    .header-navi-sp li a{
        display: block;
        padding: 3% 0;
    }
    .header-navi-sp a:link, .header-navi-sp a:visited, .header-navi-sp a:active { color: #fff;}

    .header-navi-icon{
        position:fixed;
        right:20px;
        top:3.5%;
        width:35px;
        height:35px;
        background: rgb(0,0,0);
        z-index: 100000001;
        display: block;
    }
    .header-navi-icon span {
        display: inline-block;
        transition-duration: 0.3s;
        box-sizing: border-box;
        position: absolute;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: #fff;
    }
    .header-navi-icon span:nth-of-type(1) {top: 8px;}
    .header-navi-icon span:nth-of-type(2) {top: 16px;}
    .header-navi-icon span:nth-of-type(3) {top: 24px;}

    .header-navi-iconAct span:nth-of-type(1) {
        -webkit-transform: translateY(9px) rotate(-45deg);
        transform: translateY(9px) rotate(-45deg);
    }

    .header-navi-iconAct span:nth-of-type(2) {
        opacity: 0;
    }
    .header-navi-iconAct span:nth-of-type(3) {
        -webkit-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
    }
    .header__catlist--ul {
        width: 100%;
        opacity: 1;
        background: none;
        position: static;
    }
    .header__catlist--ul li{
        padding:0;
        margin-left: 15px;
    }
}

/*-------------------------------------------
    main-imgArea 
--------------------------------------------*/

.main-imgArea {
    position: relative;
}
.topImgLogo {
    width:100%;
    position: absolute;
    top:30%;
    transition-duration: 1s;
    opacity:0;
}
.topImgLogo.delighter.started {
    opacity:1;
    margin-bottom:0;
}
.topImgLogo img{
    width:40%;
}

.main-imgArea-phrase {
    position: absolute;
    bottom: -10px;
    width: 100%;
    font-size: 500%;
    z-index: 10000000;
    /*text-shadow: rgb(255, 255, 255) 1px 0px 2px, rgb(255, 255, 255) -1px 0px 20px;*/
}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .has-header-image.home.blog .custom-header {
        height: 55vh;
    }
    .main-imgArea {
        padding-top:0;
    }
    .main-imgArea-phrase{font-size: 300%;}
    .topImgLogo {
        width:100%;
        position: absolute;
        top:30%;
        transition-duration: 1s;
        opacity:0;
    }
    .topImgLogo img{
        width:60%;
    }
}
/*-------------------------------------------
    top-blockArea
--------------------------------------------*/

.top-blockArea {
    font-size: 120%;
    padding:7% 10% 7% 10%;
    line-height:200%;
    background:url('../img/kodawari_bg.jpg') ;
}
.top-blockArea2 {
    font-size: 100%;
    padding:7% 10% 7% 10%;
    background: #000;
    color:#fff;
}
.top-blockArea2-text {
    text-align: left;
    padding: 20px 5px;
}
.top-blockArea3  {
    padding:2% 0 5% 0;
}

.top-blockArea__ttlArea--ttl{
    color: #000;
    margin:5%;
    padding-bottom:5%;
    font-weight: normal;
    letter-spacing:5px;
    opacity:0;
    margin-bottom:30px;
    transition-duration: 0.5s;
}
.top-blockArea__ttlArea--ttl.delighter.started{
    opacity:1;
    margin-bottom:0;
}

.top-blockArea__ttlArea--ttl img{ height:50px;}

.top-blockArea__ttlArea--text {
    font-size:110%;
    padding:0 5% 5% 5%;
    letter-spacing:3px;
    transition-duration: 0.5s;
    margin-bottom:30px;
    opacity:0;
}
.top-blockArea__ttlArea--text.delighter.started {
    margin-bottom:0;
    opacity:1;
}

.top-blockArea__ttlArea--text2 {
    font-size:90%;
    padding-bottom: 5%;
    transition-duration: 0.5s;
    margin-bottom:30px;
    opacity:0;
}
.top-blockArea__ttlArea--text2.delighter.started {
    margin-bottom:0;
    opacity:1;
}
.itemBox {
    font-size:80%;
    text-align:center;
    padding-bottom: 8%;
}
.itemBox--ttl { font-size: 140%; margin: 3% 0; text-align: center;}
.itemBox--img { text-align: center;; margin-bottom: 5%; padding:0 10%;}
.itemBox--img img{width: 80%;}

.top-blockArea .newsArea--ttl {
    text-align: left;
    font-size: 140%;
    padding:5% 0 0 10%;
    font-weight: normal;
    color: #000;
}

.top-blockArea .newsArea--ttl span{
    font-size: 70%;
}

.topNewsArea {
    padding:0 10% 0 10%;
    line-height:200%;
}
.newsArea {
    text-align: left;
    font-size:120%;
    padding:3% 15% 8% 15%;
}

.newsBody {
    padding: 5% 0;
    line-height: 180%;
}

.newsIcon{
    font-size: 80%;
    padding:1px 3%;
    background:#cdc45b;
    margin: 1% 8% 1% 0;
    display: inline-block;
}

.newsArea li a:link, 
.newsArea li a:visited, 
.newsArea li a:active{
    color:#000;
    transition-duration: 0.2s;
}

.newsArea li a:hover{
    color:#555;
}

/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .top-blockArea {font-size: 100%;padding:5%}
    .top-blockArea2 {font-size: 100%;padding:10% 5% 5% 5%;}
    .top-blockArea3 {font-size: 100%;padding:5% 3%;}
    .top-blockArea h2{font-size: 120%;}
    .top-blockArea2 h2{font-size: 250%;}
    .top-blockArea3 h2{font-size: 250%;}
    .top-blockArea__ttlArea--ttl img{ height:35px;}
    .top-blockArea__ttlArea--text2 {font-size:80%; text-align:left;}
    .itemBox--ttl { font-size: 200%;}
    .itemBox {
        font-size:110%;
        text-align:center;
    }
    .itemBox--ttl { font-size:120%;}
    .top-blockArea .newsArea--ttl {
        text-align:center;
        padding:3% 0 0 0;
        color: #000;
    }
    .top-blockArea__ttlArea--text {
        font-size:90%;
    }
    .topAccessArea .access--ttl{
        font-size: 120%;
    }
    .newsArea {
        text-align: left;
        font-size:90%;
        padding:3% 4% 8% 4%;
    }
    
}
/*-------------------------------------------
    footer
--------------------------------------------*/
.footerArea {
    background: #000;
    color: #fff;
    padding-bottom: 8%;
}

.footerLeft {text-align: right; padding:0 20% 0 0;}
.footerLeft img{width:200px;}
.footerRight {
    padding:0 5%;
    text-align: left;
}
.footerNavi {
    padding: 3% 15% 3% 15%;
    text-align: center;
}
.footerNavi li{
    width: 25%;
    padding:1% 0;
    float: left;
    border-right: solid #000 1px;
}
.footerNavi li:last-child { border-right: solid 0px }
.footerArea a:link, .footerArea a:visited, .footerArea a:active {color:#fff;}
.footerArea a:hover {color:#bbb;}

.footerAddress {
    text-align: center;
    padding:3% 0 3% 0;
}

.footerNavi li i{
    display: none;
}

.footerLogo {width: 20%;}
@media screen and (max-width: 768px) {
    .footerLogo {width: 50%;}
    .footerArea .footerNavi {
        font-size:90%;
        padding:0;
        margin-bottom:10%;
        text-align: center;
    }
    .footerNavi li{
        width:100%;
        text-align: left;
        border-bottom: solid #555555 1px;
        border-right: solid 0px;
        position: relative;
    }
    .footerNavi li a{
        display: block;
        padding:3%;
    }
    .footerNavi li a:hover{background:#333333;color:#fff;}
    .footerNavi li a i{
        position: absolute;
        right:5%;
        top:40%;
        display: inline-block;
    }
    .footerRight {
        font-size:90%;
        padding:4% 3% 4% 5%;
    }
}
/*-------------------------------------------
    TOP
--------------------------------------------*/

.takeoutImgArea {
    margin:15px 20%;
}
.takeoutImgArea--box {
    width:50%;
    text-align: center;
    float: left;
}
.takeoutImgArea--box img{
    width:80%;
}
.takeoutMenu {
    width: 100%;
    line-height:180%;
}
.takeoutMenu--box {
    width: 33%;
    float: left;
}
.takeoutMenu--box h3{
    font-size:120%;
    margin:3% 0;
}
.corseMenu {
    width:100%;
    margin:5px 10%;   
}
.corseMenu--box {
    width: 33%;
    float: left;
    text-align: center;
}
.corseMenu--box img{
    width:80%;
    margin-bottom:10px;
}

.topAccessArea {
    font-size: 110%;
    background:url('../img/kodawari_bg.jpg') ;
}
.topAccessTempoName {
    width:50%;
    padding:5% 0 5% 10%;
    text-align: left;
    float: left;
    transition-duration: 0.5s;
    margin-bottom:30px;
    opacity:0;
}
.topAccessTempoName.delighter.started {
    margin-bottom:0;
    opacity:1;
}

.tenpoArea--ttl{
    margin-bottom:5%;
    font-size:130%;
}
.tenpoImgArea {
    width:50%;
    float: left;
    padding:5% 10% 0 0;
    transition-duration: 0.5s;
    margin-bottom:30px;
    opacity:0;
}
.tenpoImgArea.delighter.started {
    margin-bottom:0;
    opacity:1;
}

.tenpoImgArea--box{
    text-align: center;
    width:50%;
    padding:0;
    float: left;
}
.tenpoImgArea--box img{
    width:100%;
}

.topAccessArea .access--text{
    padding:2% 0 ;
    line-height:180%;
}

.topAccessArea .access--ttl{
    padding:5% 0 0 0;
    text-align: center;
    letter-spacing:3px;  
    color:#000;
    font-size: 130%;
    font-weight: normal;
}
.topAccessArea .access--ttl span{font-size: 50%;}

@media screen and (max-width: 768px) {
    .topAccessArea .top-blockArea__ttlArea--text2 {
        padding:0 5%;
    }
    .tenpoImgArea {
        width:100%;
        float:none;
        padding:0 5% 0 5%;
    }
    .topAccessTempoName {
        width:100%;
        padding:5% 0 3% 5%;
        float:none;
    }
    .tenpoImgArea--box{
        text-align: center;
        width:48%;
        margin:10px 1%;
    }
    .takeoutMenu--box {
        width: 100%;
        float: left;
    }
    .takeoutImgArea {
        margin:15px 5%;
    }
    .takeoutImgArea--box img{
        width:100%;
    }
    .corseMenu {
        width:100%;
        margin:5px 3%;   
    }
    .corseMenu--box {
        width: 100%;
        float: none;
    }
    .corseMenu--box img{
        width:70%;
        margin:3% 0;
    }
    .topAccessArea {
        font-size: 90%;
    }
    .topAccessArea .access--text{
        padding:0 3%;
    }
}
/*-------------------------------------------
    next
--------------------------------------------*/

.nextArea {
    background-size: 100%;
    padding: 200px 0 0 0;
    font-size:80%;
    background:url('../img/kodawari_bg.jpg') ;   
}

.nexrPageTtl {
    font-size:140%;
    margin-bottom:20px;
}
.nextBodyArea {
    background: #fff;
    padding: 5% 10% ;
    font-size: 120%;
    text-align: left;
    line-height: 200%;
}
@media screen and (max-width: 768px) {
    .nextArea {
        padding: 100px 0 0 0;
    }
    .nextBodyArea {
        padding: 5% 3%;
    }
}

/*-------------------------------------------
   contact
--------------------------------------------*/
.contactArea {
    background: #fff;
    padding: 5% 5%;
    font-size: 110%;
    text-align: left;
}

.formLabel {
    background: #f2e827;
    padding:5% 10%;
    margin: 3% 0;
    display: block;
    color: #4e490c;
    text-align: center;
}

.formText {
    width: 80%;
    margin:2% 5%;
    border: solid #cccccc 1px;
}

.message {
    background: none;
}

@media screen and (max-width: 768px) {
    .formLabel {
        padding:2% 10%;
        margin: 5% 0;
    }
    .formText {
        width: 96%;
        margin:2% ;
        border: solid #cccccc 1px;
    }
}
/*---------------------*/

.entry-title {
    font-size:300%;
    text-align: center;
    margin:0 0 8% 0;
    color: #fff;
}

.entry-content {
    line-height: 180%;
}
.entry-content h2{
    text-align:left;
    margin: 3% 0 8% 0;
    font-size: 200%;
}

.entry-content h2 span{
    padding: 2%;
    border-bottom:solid 1px #bbcccc;
}

.entry-content .wp-block-image {
    text-align: center;
    margin: 5% 0;
    width: 80%;
}

.wp-block-table table{
    margin:50px 0;
}

.wp-block-table table{
    margin:50px 0;
}

.rinenArea {
    font-size:140%;
    margin:8% 0;
}
.widget-title{
    font-size:160%;
    padding: 3% 1%;
    margin-bottom:3%;
    border-bottom:solid 1px #bbcccc;   
}
.menu {
    margin:5% 2% 5% 2%;
}
.menu li{
    margin:3% 0;
}
.search-field {
    width: 70%;
    border:solid 1px #bbcccc;   
}
.wp-block-table table{
    margin:50px 0;
}

@media screen and (max-width: 768px) {
    .contactArea {
        background: #fff;
        padding: 5% 2%;
    }
    .entry-content h2{
        text-align:center;
        margin: 3% 0 8% 0;
        font-size: 160%;
    }
    .rinenArea {
        font-size:120%;
        margin:8% 0;
    }
}
/*-------------------------------------------
   prpfile
--------------------------------------------*/

.profile-ttl {
    margin-top:12%;
    max-width:200px;
}
.profile-logo {
    max-width:600px;
}
.profilel-L {
    padding: 0 3% 0 10%;
    text-align: right;
}
.profilel-R {
    padding: 5% 20% 0 0;
}
.companyArea{
    background:#f8f5ee;
    padding:0 0 5% 0;
    margin-bottom:5%;
}
.profileText{
    background:#fff;
    margin: 5% 0 ;
    padding:5% 8% 5% 8%;
    line-height:230%;
}
.companyText{
    margin: 10% 0 5% 0;
    padding:5% 8%;
    line-height:230%;
    font-size:140%;
}
.kigyo-logo-text {
    font-size:140%;
}
@media screen and (max-width: 768px) {
    .profilel-L {
        text-align:center;
        padding:0;
    }
    .profilel-R {
        padding:0 0 5% 0;
    }
    .profile-ttl {
        width:50%;
        margin:5% 0;
    }
    .profile-logo {
        width:100%;
        margin-bottom: 3%;
    }
    .profileText{
        font-size:140%;
        line-height:230%;
        margin: 0 ;
        padding:0 3%;
    }
    .companyArea{
        background:#f8f5ee;
        padding:0;
        margin-bottom:5%;
    }
    .companyText{
        margin:0;
        padding:5% 3%;
        line-height:230%;
        font-size:120%;
    }
}

/*-------------------------------------------
   access
--------------------------------------------*/

.mapArea {
    padding:3% 0 0 0;
    width:100%;
    text-align: center;
}

.mapAreaMain {
    width:100%;
    height: 350px;
    margin:4% 0 2% 0;
}

.mapInfo {
    padding:3% 20%;
}

@media screen and (max-width: 768px) {
    .mapInfo {
        padding:3%;
    }
}
/*-------------------------------------------
   service
--------------------------------------------*/

.serviceArea {
    padding: 5% 10%;
}
.serviceArea-ttl {
    padding: 5%;
}
.serviceArea-img {
    padding: 5%;
}
/*-------------------------------------------
   page
--------------------------------------------*/
.pageArea {
    padding: 3% 5%;
}

.pageMsg {
    margin-bottom: 3%; 
}

.page-title {
    text-align: center;;
    font-size:150%;
    padding:3% 0;
}

.page-content {
    padding:2% 0;
}

.entry-meta {
    text-align: right;
}

.page-15 .wp-block-group,
.page-22 .wp-block-group{
    width : 25% ;
    width : calc((100%) / 4) ;
    padding:3%;
    float: left;
    text-align: center;
    font-size:120%;
}

.page-15 .wp-block-group img,
.page-22 .wp-block-group img{
    width :100% ;
    margin-bottom: 3%;
    border-radius: 50%;
}

@media screen and (max-width: 768px) {
    .pageArea {
        padding: 3% ;
    }
    .page-title {
        font-size:130%;
    }
    .entry-meta {
        text-align: left;
    }
    .page-content {
        padding:5% 0 10% 0;
    }
    .page-15 .wp-block-group,
    .page-22 .wp-block-group{
        width : 50% ;
        width : calc((100%) / 2) ;
    }
}

.teacherList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    line-height: 150%;
}
.teacherList li{
    width: 20%;
    padding: 0 1%;
    font-size: 70%;  
    /*float: left;*/   
}

.teacherListHeader {
    text-align: center;
    padding: 3% 0;
    font-size: 120%;
}

.careerWork{
    font-size: 90%;  
    line-height: 180%;
}

.listbox--main {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.listbox--main__box {
    width: 48%;
    margin: 1%;
    background: #fff;
    box-shadow:0px 0px 9px -3px #000000;
    border-radius: 7px;
    border-top: 5px #000 solid;
    font-size: 80%;
}

.listbox--main__header {
    background: #eeeeee;   
    padding:4% 5%;
}

.listbox--main__label {
    padding:15px 5% 0 5%;
}

.listbox--main__textheader {
    width: 120px;
    padding: 1%;
    margin: 3% 5% 0 5%;
    border: 1px #eee solid;
    border-bottom: 0px;
    background: #eee;
    text-align: center;
}

.listbox--main__textheader {
    width: 120px;
    padding: 1%;
    margin: 3% 5% 0 5%;
    border: 1px #eee solid;
    border-bottom: 0px;
    background: #eee;
    text-align: center;
}
.listbox--main__text {
    border-top: 1px #eee solid;   
    padding: 3% 5%;
}

@media screen and (max-width: 768px) {
    .teacherList li {
        width: 98%;
        font-size: 80%;
    }
    .listbox--main__box {
        width: 98%;
    }
}

/*-------------------------------------------
   記事リスト
--------------------------------------------*/
.article-list__h2 {
    font-size: 150%;
    text-align: left;
    padding: 1% 0%;
    margin-bottom: 3%;
    border-bottom: solid #dddddd 1px;
    position: relative;
}
/*-------------------------------------------
   記事詳細レイアウト
--------------------------------------------*/

.articlePage{
    text-align: left;
    line-height: 150%;
}

/*題名*/
.articlePage__ttl{
    font-size: 180%;
    font-weight: bold;    
    margin: 0 0 3% 0;
}

/*副題*/
.articlePage__subttl{
    font-size: 150%;
    font-weight: bold;    
}

.articlePage__date{
    text-align: right;;
    color: #aaaaaa;
    padding:10px 0 10px 0;
}

.articlePage__Topimg{
    margin: 0 0 5% 0;
}

.articlePage__item{
    margin: 3% 0 5% 0;
}


/*写真_グレー*/
.articlePage__imgrightgray{
    margin: 2% 0;
    font-size: 80%;
}

.articlePage__imgrightgray　img{
    width:100%;
}

/*写真周辺設定*/
.articlePage__imgright{
    float: right;
    width: 300px;
    margin: 0 2% 2% 2%;
    padding: 2%;
    font-size: 80%;
}

/*サイドバー*/
.sidebar__ttl {
    background: #000;
    color: #fff;;
    font-size: 150％;
    padding:3%;
}
.sidebar__catlist{
    margin:0 0 10% 0;
}
.sidebar__catlist li{
    margin: 3%;
}
.sidebar__catlist li a:link, 
.sidebar__catlist li .footer a:visited, 
.sidebar__catlist li .footer a:active{
    color: #000;
}

.sidebar__catlist .rank0{ color:gold;}
.sidebar__catlist .rank1{ color:#c0c0c0;}
.sidebar__catlist .rank2{ color:#B08A1C}
.sidebar__catlist .rank3,
.sidebar__catlist .rank4{ color:#666666}


.sidebar__catlist li a:hover{
    color: #bbbbbb;
}

/*スマホの画面サイズ設定*/
@media screen and (max-width: 768px) {
    .articlePage__imgrightgray{
        float: none;
        width: 100%;
        margin: 5px;
    }
    .articlePage__imgright{
        float: none;
        width: 100%;
        margin: 5px;
    }
    .articlePage__ttl{
        font-size: 120%;
    }
    .articlePage__subttl{margin: 25px 0;font-size: 110%;}
}

/*---------------------------
    preview
---------------------------*/

.faqArea dt{
    margin-bottom:15px;
    font-size:110%;
}
.faqArea dd{
    font-size:80%;
    margin-bottom:15px;
}
/*---------------------------
    preview
---------------------------*/

.previewArea {
	position: fixed;
	bottom:0;
	width:100%;
    background-color: rgba(0, 0, 0, 0.8);
}