/*
* Theme Name: toshin.com
* Theme URI: https://www.toshin.com
* Description: toshin.comで共通で使うスタイル
* Created Date: 2018.02.28
* Update Date:
*/


/*====================================

----------------------------------
Color
----------------------------------

primary  : #009380


----------------------------------
Font
----------------------------------

Mac:Hiragino Sans
Win:;YuGothi

====================================*/

body{
    font-family: 'Kosugi Maru', sans-serif;
    }


a{
    color: #000;
}

h2{
    text-align: center;
}

section{
    padding-top: 2vw;
}

/*------------------------------------
  ttl
------------------------------------*/
.ttl-primary {
    text-align: center;
    font-size: 2.0rem;
}
.ttl-primary .sub_ttl {
    display: block;
    font-size: 1.6rem;
    margin-top: .5em;
}
.ttl-secondary {
    font-size: 1.6rem;
    margin-bottom: 1em;
    border-bottom: solid 1px #ccc;
}
.ttl-tertiary {
    font-size: 1.6rem;
    margin-bottom: 1em;
    border-bottom: solid 1px #ccc;
}
.box-card img + .ttl-tertiary {
    margin-top: 1em;
}


/*------------------------------------
  Button
------------------------------------*/
.btn-basic {
    display: block;
    padding: .7em 1em;
    transition: none;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.fa-angle-right {
    line-height: 1.5;
    float: right;
}
/* btn-basicApplication-type01 */
.btn-basicApplication-type01 {
    border: 1px solid #cc1338;
    background-color: #dc143c;
    background-image: linear-gradient(to bottom, #dc143c, #cc1338);
}

.btn-basicApplication-type01:hover {
    border: 1px solid #bd1134;
    background-color: #ad102f;
    background-image: linear-gradient(to bottom, #cc1338, #ad102f);
}

/* btn-basicRequest-type01 */
.btn-basicRequest-type01 {
    border: 1px solid #009380;
    background-color: #008271;
    background-image: linear-gradient(to bottom, #009380, #008271);
}

.btn-basicRequest-type01:hover {
    border: 1px solid #008271;
    background-color: #008271;
    background-image: linear-gradient(to bottom, #008271, #008271);
}
/* btn-basicMeeting--type01 */
.btn-basicMeeting--type01 {
    border: 1px solid #002d71;
    background-color: #0041a4;
    background-image: linear-gradient(to bottom, #0041a4, #002d71);
}

.btn-basicMeeting--type01:hover {
    border: 1px solid #0041a4;
    background-color: #00193e;
    background-image: linear-gradient(to bottom, #0041a4, #00193e);
}

.btn-row-three .btn-basic {
    font-size: 1.8rem;
}
.btn-wide .btn-basic {
    width: 90%;
    margin: 0 auto calc(20px + 30px) auto;
}
.btn-bottom-wrap {
    padding: 20px 20px 10px;
    background-color: #f5f5f5;
}
.btn-bottom-wrap h3 {
    text-align: center;
    border-bottom: none;
}

.col-flex.btn-row-two,
.col-flex.btn-row-three {
    display: block;
}
.btn-row-two .col-6,
.btn-row-three .col-4 {
    max-width: 90%;
    margin: 0 auto;
}


/*------------------------------------
  Box
------------------------------------*/
.box-card {
    background-color: #f5f5f5;
    border: solid 1px #ccc;
    padding: 20px 10px;
}
.box-card p:last-child {
    margin-bottom: 0;
}
.section-secondary .box-card {
    margin-bottom: -20px;
}
.section-secondary:last-child .box-card {
    margin-bottom: 40px;
}

/*------------------------------------
  banner:common;
------------------------------------*/
.banner-area{
    padding:20px 10px;
}

/*------------------------------------
  SNS:common;
------------------------------------*/
.sns-item {
    display: flex;
    margin-top: calc(40px + 40px);
    justify-content: space-around;
    margin-top: 40px;
}
.sns-share {
    font-family: fontawesome;
    line-height: 1;
    display: flex;
    width: 47%;
    height: 78px;
    margin: 2% 1.5%;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
}
.sns-share:hover {
    opacity: .7;
}
.sns-share .fab,
.sns-share .fas {
    font-size: 5rem;
}
.sns-share span {
    font-weight: bold;
}
.sns-share .share-ttl {
    display: block;
    font-size: 13px;
    margin-left: .5em;
    font-weight: bold;
}
.btn-sns-fb {
    background-color: #305097;
}
.btn-sns-tw {
    background-color: #00aced;
}
.btn-sns-line {
    font-size: 2rem;
    background-color: #4ad319;
}
.btn-sns-mail {
    background-color: #009380;
}


/*------------------------------------
  Fix banner
------------------------------------*/
.content-main {
    margin-bottom: 30px;
}
.fixed-banner {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    text-align: center;
    padding: 15px 15px;
    box-shadow: 0 2px 6px gray;
    background-color: #f5f5f5;
}
.fixed-banner .btn-basicApplication-type01 {
    width: 100%;
    margin: 0 auto;
}


/*------------------------------------
  To top
------------------------------------*/
#pageTop {
    position: fixed;
    bottom: 70px;
    right: 10px;
    z-index: 9999;
}
#pageTop a {
    display: block;
    z-index: 999;
    padding: 15px 0 0;
    border-radius: 50px;
    width: 35px;
    height: 35px;
    background-color: #666;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    padding: 7px 0 0;
    opacity: .7;
}
#pageTop a:hover {
    text-decoration: none;
    padding: 7px 0 0;
    width: 35px;
    height: 35px;
    opacity: .7;
    background-color: #666;
}
#pageTop .fas {
    font-size: 1.6rem;
}



/*------------------------------------
  img
------------------------------------*/

img.align-left,
img.align-right {
    width: 50%;
}
.section-secondary > img {
    margin-bottom: 15px;
}


/*ここからオリジナル*/
/*ヘッダー*/

header{
    display: flex;
    justify-content: space-between;
    padding: 2%;
    background: #fff;
    position: fixed;
    z-index: 50;
}

header .itoman-logo{
    width: 70%;
    padding: 2% 0;
}

header > #nav-toggle {
    width: 10%;
    height: 60%;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    right: 4%;
    top: 20%;
}

header > #nav-toggle > span {
    display: block;
    width: 100%;
    height: 12%;
    content: '';
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border-radius: 5px;
    /* margin-bottom: 0.4em; */
    background-color: #00469B;
    position: relative;
}
header > #nav-toggle.open > span:nth-of-type(1){
    transform: rotate(45deg);
    top: 30%;
}
header > #nav-toggle.open > span:nth-of-type(2){
    display: none;
}
header > #nav-toggle.open > span:nth-of-type(3){
    transform: rotate(-45deg);
    bottom: 20%;
}

/*メニュー*/
nav{
    position: fixed;
    width: 100%;
    left: 0;
    background-color: #00469B;
    color: #fff;
    display: none;
}

nav > ul{
    display: flex;
    flex-wrap: wrap;
}
nav > ul > li{
}
nav > ul > li > a{
    width: calc(100vw / 3);
    display: block;
    text-align: center;
    box-sizing: border-box;
    /* padding: 3%; */
    height: calc(100vw / 3);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: #fff;
    font-weight: bold;
}
nav > ul > li > a.white{
    color: #00469b;
    background: #fff;
}
nav > ul > li > a.kodomo{
    color: #009380;
}
nav > ul > li > a > img{
    width: 30%;
    margin: 0 auto;
}

.container img{
    width: 100%;
}

.container-wrap{
    position: relative;
}

/*スライド*/
#mv-swiper-02 .swiper-container{
    overflow: initial !important;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {

}

#mv-swiper-02 .swiper-slide{
    width: 100%;
    width: 30%;
    background: #fff;
    display: block;
    box-shadow: 0px 0px 7px -1px #a0a0a0;
    padding: 2%;
    box-sizing: border-box;
}

#mv-swiper-02 .swiper-slide .img-box{
    background-color: #000;
}

#mv-swiper-02 .swiper-slide .ttl{
    font-weight: bold;
}

#mv-swiper-02 .swiper-slide .btn{
    display: block;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    background-color: #00469B;
    color: #fff;
    padding: 2%;
}

div#mv-swiper-02 {
    position: absolute;
    background-color: #ffffffc7;
    padding: 3% 0 8% 0;
    width: 100%;
    margin-top: -5vw;
}

.swiper-pagination-bullet{
    width: 40px!important;
    height: 4px!important;
    border-radius: 0%!important;
}

.swiper-pagination-bullet-active{
    background-color: #00469B!important;
}


/*コンテンツ①*/

#class_info{
    text-align: center;
    font-weight: bold;
    background-color: #F7F7F7;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

.underline{
    border-bottom: solid 1vw #00469B;
    width: 10vw;
    margin: 0 auto;
    margin-bottom: 1vw;
}

#class_info h3{
    text-align: left;
    padding-bottom: 3vw;
    border-bottom: 3px solid #444444;
    margin: 3vw;
    font-size: 1.4em;
    position: relative;
}

#class_info h3::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    /* display: block; */
    /* content: " "; */
    width: 30%;
    border-bottom: 3px solid #00469b;
}

#class_info p{
    font-size: 5vw;
    margin: 0;
}

.class{
    background-color: white;
    border-left: solid 4vw #00469B;
    /* width: 46vw; */
    padding: 7vw 0;
    /* height: 40vw; */
    flex: 1;
    margin: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.class img{
    width: 12vw;
    margin-top: 3vw;
}

.class span{
    font-weight: bolder;
}

#classes p{
    font-size: 4vw;
}

.class_row{
    display: flex;
    flex-wrap: wrap;
}

#classes > .class_row:nth-of-type(1){
    flex-direction: column;
}

#classes > .class_row > .class:nth-of-type(3){
    width: 46vw;
    flex: none;
}

#school_search{
    text-align: center;
    font-weight: bold;
    background-color: #EDF2F8;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

#school_search p{
    font-size: 5vw;
    margin: 0;
}

#school_search .school_content ul{
    background: #fff;
    padding: 5vw 0;
}

#school_search .school_content li {
    display: flex;
    border-left: 7px solid #00469b;
    padding-left: 3vw;
    justify-content: left;
    align-items: center;
    margin-bottom: 1vw;
}

#school_search .school_content p{
    flex: 1;
    text-align: left;
}

#school_search .school_content a{
    display: block;
    background: #00469b;
    color: #fff;
    margin: 1vw;
    padding: 2vw;
}

.underline{
    border-bottom: solid 1vw #00469B;
    width: 10vw;
    margin: 0 auto;
    margin-bottom: 1vw;
}

#school_announce{
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    padding-top: 5vw;
    padding-bottom: 5vw;
    width: 96vw;
    margin: 0 auto;
    margin-bottom: 2vw;
}

#school_announce p{
    font-size: 5vw;
    margin: 0;
}

.underline{
    border-bottom: solid 1vw #00469B;
    width: 10vw;
    margin: 0 auto;
    margin-bottom: 1vw;
}

.event{
    background-color: #043F7F;
    color: #fff;
    margin: 0;
    height: 15vw;
    text-align: center;
    flex: 3;
    margin-left: 2vw;
}

.event p{
    margin: 0;
    padding-top: 4vw;
}

.announce_tittle{
    display: flex;
    justify-content: center;
    margin-left: -2vw;
    margin-bottom: 4vw;
}

.list{
    margin: 0;
    width: 48vw;
    height: 15vw;
    text-align: center;
    font-weight: bold;
    flex: 4;
}

.list p{
    margin: 0;
    padding-top: 4vw;
}

.announce_contents{
    width: 92vw;
    text-align: center;
    margin: 2vw;
}

.announce_contents a{
    margin: 4vw 0;
    display: block;
}

.announce_inside{
    box-shadow: 0px 0px 11px -8px;
}

.announce_inside2{
    box-shadow: 0px -0px 11px -8px;
    height: 113vw;
}

.school_accordion img{
    width: 20%;
    padding: 3vw;
}

.school_accordion p{
    padding-top: 4vw;
    padding-left: 5vw;
}

.school_accordion span{
    background-color: #003370;
    font-size: 11vw;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 2vw;
}

#school_search ul{
  padding-left: 4vw;
  padding-right:  4vw;
  padding-top: 0.5vw;
}

.event2 p{
    margin: 0;
    font-size: 4vw;
    padding-top: 5vw;
}

.list2 p{
    margin: 0;
    font-size: 4vw;
    padding-top: 5vw;
}

.event2{
    background-color: #043F7F;
    color: #fff;
    margin: 0;
    width: 48vw;
    height: 15vw;
    text-align: center;
}

.list2{
    margin: 0;
    width: 48vw;
    height: 15vw;
    text-align: center;
    font-weight: bold;
    margin-bottom: 3vw;
}

#school_announce2{
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    padding-top: 5vw;
    padding-bottom: 5vw;
    width: 96vw;
    margin: 0 auto;
}

.tab_menu{
    font-size: 5vw;
    background-color: #E8E8E8;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90vw;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 6vw;
}

.tab_menu li{
    list-style: none;
    width: 30vw;
    height: 12vw;
    padding-top: 2vw;
    border: solid 0.05vw #fff;
}

.tab_content{
    text-align: left;
    width: 90vw;
    margin: 0 auto;
    overflow-x: scroll;
    height: 60vw;
}

.tab_content p{
	border-bottom: solid 1px #000;
	width: 80vw;
	position: relative;
	margin-bottom: 3vw;
}

.tab_content p::after {
	content: "";
	display: block;
	width: 1px;
	height: 5vw;
	background-color: #000;
	position: absolute;
	right: 0;
	bottom: 0;
	transform: rotate(-35deg);
	transform-origin: bottom;
}



.tab_menu2{
    font-size: 5vw;
    background-color: #E8E8E8;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90vw;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 6vw;
}

.tab_menu2 li{
    list-style: none;
    width: 30vw;
    height: 12vw;
    padding-top: 2vw;
    border: solid 0.05vw #fff;
}

.tab_content2{
    text-align: left;
    width: 90vw;
    margin: 0 auto;
    overflow-x: scroll;
    height: 60vw;
}

.tab_content2 p{
    border-bottom: solid 1px #000;
    width: 80vw;
    position: relative;
    margin-bottom: 3vw;
}

.tab_content2 p::after {
    content: "";
    display: block;
    width: 1px;
    height: 5vw;
    background-color: #000;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(-35deg);
    transform-origin: bottom;
}


#date{
    font-weight: bold;
}

/*校舎一覧*/

        #school_search li{
            list-style:none;
        }

        li.school_accordion{
            background-color: #00469B;
            color: #fff;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
        }

        li.school_accordion > p{
            flex: 4;
        }
        li.school_accordion i{
            transition: .5s;
        }
        li.school_accordion.open i{
            transform: rotate(-180deg);
        }

        /*タブ*/
                .tab_menu .active{
            background-color: #00469B;
            color: #fff;
            font-size: 5vw;
            font-weight: bold;
            padding: 2vw;
            width: 30vw;
            height: 12vw;
        }
        .tab_content li{
            display: none;
        }
        .tab_content li.show{
            display: block;
        }


                .tab_menu2 .active2{
            background-color: #00469B;
            color: #fff;
            font-size: 5vw;
            font-weight: bold;
            padding: 2vw;
            width: 30vw;
            height: 12vw;
        }
        .tab_content2 li{
            display: none;
        }
        .tab_content2 li.show2{
            display: block;
        }
        /*イトマンについて*/
        #school_information{
    overflow: hidden;
}
#school_information .swiper-slide{
    height: 60vh;
    display: block;
    overflow: hidden;
}
#school_information img{
    height: 100%;
    width: auto;
    position: relative;
    right: 45%;
}
.info-pagination{
    text-align: center;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10;
}
#school_information .info_txt {
    position: absolute;
    bottom: 0;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    width: 100%;
    height: 35%;
    padding: 0 5vw 0 5vw;
    /* padding-bottom: 15vw; */
    font-size: 2em;
    margin-bottom: 0;
    color: #fff;
    font-weight: bold;
}
#school_information .info_txt span{
    font-size: .6em;
    line-height: 0.7em;
}

.wrapper{
    border-bottom: 1px solid #fff;
    width: calc(100% - 10vw);
    position: absolute;
    bottom: 3vw;
    line-height: 1.2;
    padding-bottom: 4vw;
}
.wrapper::after {
    content: "";
    display: block;
    width: 1px;
    height: 15vw;
    background-color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(-35deg);
    transform-origin: bottom;
}

#school_information .btn{
    background-color: #043f7e;
    width: 10vw;
    height: 10vw;
    margin-top: 4vw;
    margin-right: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Twitter*/
#twitter{
    height: 60vh;
    overflow: scroll;
}

#pool-water {
    background-image: url(../img_new/water-bg.png);
    background-size: 100% 100%;
    padding: 12vw 5vw;
    margin-top: 6vw;
}

#pool-water .ttl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5vw;
}

#pool-water h2{
    width: 80%;
    font-size: 1.2em;
}

#pool-water .ttl img{
    display: block;
    width: 20%;
    height: 20%;
}

#aed{
    padding: 12vw 5vw;
}

#golf a{
    background: #00469b;
    color: #fff;
    margin-left: 5vw;
    margin-right: 5vw;
    display: block;
    padding: 3vw;
    font-size: 1.5em;
    position: relative;
}

#golf a svg{
    position: absolute;
    top: 0;
    right: 5vw;
}

#school_information_top p{
	margin: 0;
	font-size: 5vw;
	text-align: center;
	font-weight: bold;
}

#school_information_top{
    margin-top: 3vw;
    margin-bottom: 2vw;
}

/* ナガセグループからのお知らせ */
.nagase_information_item {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}
.nagase_information_item a{
    margin:1vw;
}
#nagase_information{
    margin: 20px 0;
}

#nagase_information p {
    margin: 0;
    font-size: 5vw;
    text-align: center;
    font-weight: bold;
}
#toitsutest p{
    font-size: 3.5vw;
}