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

Mixin

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

@media screen and (max-width: 768px) {
    header {
        height: 65px;
    }
    .engpage header {
		width: 100%;
	}
    section {
        position: relative;
        z-index: 0;
        letter-spacing: 1px;
    }
    section#box01 {
        padding-top: 55%;
    }
    section#box01 h2 {
        width: 200px;
        height: 120px;

    }

    section .more img {
        width: 66px;
    }
    section#box02:before,
    section#box03:before,
    section#box05:before {
        display: none;
    }
    section#box02:after,
    section#box03:after,
    section#box05:after {
        display: none;
    }
    section#box02 div.cf,
    section#box03 div.cf,
    section#box05 div.cf {
        height: auto;
    }
    section#box02 div.cf div.fl,
    section#box03 div.cf div.fl,
    section#box05 div.cf div.fl {
        width: 100%;
        height: auto;
        position: relative;
        padding: 6.6%;
    }
    section#box02 div.cf div.fl p.ttl,
    section#box03 div.cf div.fl p.ttl,
    section#box05 div.cf div.fl p.ttl {
        position: static;
        border-bottom: 1px solid rgba(255, 255, 255, 0.75);
        margin-bottom: 20px;
        padding: 0 0 5px;
    }
    section#box02 div.cf div.fl p.ttl img,
    section#box03 div.cf div.fl p.ttl img,
    section#box05 div.cf div.fl p.ttl img {
        width: 100px;
    }
    section#box02 div.cf div.fl .box,
    section#box03 div.cf div.fl .box,
    section#box05 div.cf div.fl .box {
        padding-left: 0;
        margin-top: 0;
    }
    section#box02 div.cf div.fl .box h2,
    section#box03 div.cf div.fl .box h2,
    section#box05 div.cf div.fl .box h2 {
        font-size: 4.8vw;
        margin-bottom: 15px;
    }
    section#box02 div.cf div.fl .box p,
    section#box03 div.cf div.fl .box p,
    section#box05 div.cf div.fl .box p {
        font-size: 3.46vw;
        line-height: 20px;
        margin-bottom: 20px;
    }
    section#box02 div.cf div.fr,
    section#box03 div.cf div.fr,
    section#box05 div.cf div.fr {
        width: 100%;
        height: auto;
    }
    section#box02 div.cf div.fr div.box {
        margin-top: 1px;
        min-height: 130px;
        position: relative;
    }
    section#box02 div.cf div.fr div.box .txt {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 86.6%;
        height: 57%;
    }
	section#box02 div.cf div.fr div.box:nth-child(2) .txt, section#box02 div.cf div.fr div.box:nth-child(3) .txt {
        height: 74%;
    }
    section#box02 div.cf div.fr div.box a {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 130px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
    }
    section#box02 div.cf div.fr div.box a:hover {
        opacity: 0.6;
    }
    section#box02 div.cf div.fr div.box h3 {
        font-size: 4.4vw;
        margin-bottom: 5px;
		text-align:left;
    }
    section#box02 div.cf div.fr div.box p {
        font-size: 3.2vw;
		text-align:left;
    }
    section#box02 div.cf div.fr div.box p.more {
        margin-top: 15px;
    }
    section#box02 div.cf div.fr div.box:nth-child(1) a {
        background: url(../../img/index/box02_bg01.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box02 div.cf div.fr div.box:nth-child(2) a {
        background: url(../../img/index/box02_bg02.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box02 div.cf div.fr div.box:nth-child(3) {
        min-height: 130px;
    }
    section#box02 div.cf div.fr div.box:nth-child(3) a {
        background: url(../../img/index/box02_bg03.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box03 div.cf div.fr div.box {
        margin-top: 1px;
        min-height: 130px;
        position: relative;
    }
    section#box03 div.cf div.fr div.box .txt {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 86.6%;
        height: 57%;
    }
	section#box03 div.cf div.fr div.box:nth-child(2) .txt, section#box03 div.cf div.fr div.box:nth-child(3) .txt {
        height: 74%;
    }
    section#box03 div.cf div.fr div.box a {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 130px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
    }
    section#box03 div.cf div.fr div.box a:hover {
        opacity: 0.6;
    }
    section#box03 div.cf div.fr div.box h3 {
        font-size: 4.4vw;
        margin-bottom: 5px;
		text-align:left;
    }
    section#box03 div.cf div.fr div.box p {
        font-size: 3.2vw;
		text-align:left;
    }
    section#box03 div.cf div.fr div.box p.more {
        margin-top: 15px;
    }
    section#box03 div.cf div.fr div.box:nth-child(1) a {
        background: url(../../img/index/box03_bg01.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box03 div.cf div.fr div.box:nth-child(2) a {
        background: url(../../img/index/box03_bg02.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box03 div.cf div.fr div.box:nth-child(3) {
        min-height: 130px;
    }
    section#box03 div.cf div.fr div.box:nth-child(3) a {
        background: url(../../img/index/box03_bg03.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box03 div.cf div.fr img {
    	width:66px;
    	margin:0;
    }
    /*section#box03 div.cf div.fr {
        padding: 6.6%;
    }

    section#box03 div.cf div.fr .right_box{
    max-height: inherit;
    width: 100%;
    position: static;
    
}

    section#box03 div.cf div.fr p {
        font-size: 3.1vw;
        line-height: 20px;
        margin-bottom: 30px;
		text-align:left;
    }
	section#box03 div.cf div.fr p br {
		display:none !important;
	}
    section#box03 div.cf div.fr div.cf {
        height: auto;
    }
    section#box03 div.cf div.fr div.cf figure {
        width: 100%;
        padding-bottom: 30px;
    }
    section#box03 div.cf div.fr div.cf figure figcaption {
        font-size: 3.46vw;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        margin-bottom: 20px;
    }
    section#box03 div.cf div.fr div.cf figure img {
        display: block;
        margin: 0 auto;
    }
    section#box03 div.cf div.fr div.cf figure.fl {
        float: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 1);
        padding: 0 0 35px;
        margin-bottom: 35px;
        position: relative;
    }
    section#box03 div.cf div.fr div.cf figure.fl img {
        width: 265px;
    }
    section#box03 div.cf div.fr div.cf figure.fl:after {
        display: block;
        width: 21px;
        height: 21px;
        content: "";
        background: url(../../img/index/box03_icon.png);
        background-size: contain;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -10px;
        margin: auto;
    }
    section#box03 div.cf div.fr div.cf figure.fr {
        float: none;
        padding: 0 0 15px;
    }
    section#box03 div.cf div.fr div.cf figure.fr img {
        width: 196px;
    }
    section#box03 div.cf div.fr p.copy {
        font-size: 3.46vw;
        line-height: 25px;
        margin-bottom: 0;
        text-align: left;
    }*/
    div#box04 {
        padding: 0;
    }
    div#box04:before {
        display: none;
    }
    div#box04 .box {
        background: #004593;
        position: relative;
    }
    div#box04 section.full{
      height: auto;
    }
    div#box04 section.greeting.full{
      padding: 0;
    }
    div#box04 .box img {
        display: block;
        position: static;
        width: 50%;
        margin: 0 auto;
    }
    div#box04 .box p {
        width: 86.8%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        text-align: left;
        font-size: 4.13vw;
    }
    div#box04 .box p.ttl {
        bottom: 28%;
    }
    div#box04 .box p.ttl img {
        width: 100%;
        display: inline-block;
    }
    div#box04 .box p.copy {
        bottom: 5%;
        font-style: italic;
        font-size: 4.13vw;
    }
    div#box04 .txt {
        background: #4c4948;
        padding: 5.3% 6.6% 10%;
        position: relative;
        font-size: 3.1vw;
    }
	div#box04 .txt p:first-child br {
		display:none;
	}
    div#box04 .txt p+p {
        margin-top: 20px;
    }
    div#box04 .txt img.sign {
        width: 29%;
        position: absolute;
        right: 10%;
        bottom: 30%;
    }
}

@media screen and (max-width: 768px) and (max-width: 374px) {
    div#box04 .txt img.sign {
        width: 24%;
        right: 6%;
        bottom: 26%;
    }
}

@media screen and (max-width: 768px) {
    div#box04 .txt a.more {
        display: inline-block;
        margin-top: 20px;
    }
    section#box05:before,
    section#box05:after {
        display: none;
    }

    section#box05 .box img{
      width: auto;
    }
    section#box05 .more{
      margin-bottom: 5px;
    }
    section#box05 .more img{
      width: 66px;
    }
    section#box05 div.cf div.fl p.ttl img {
        width: 40px;
    }
    section#box05 div.cf div.fl .box h2 {
        line-height: 30px;
    }
    section#box05 div.cf div.fr div.box {
        width: 50%;
        height: auto;
        position: relative;
        float: left;
    }
    section#box05 div.cf div.fr div.box:nth-child(even) a {
        border-left: 1px solid #004593;
    }
    section#box05 div.cf div.fr div.box:nth-child(1) a,
    section#box05 div.cf div.fr div.box:nth-child(2) a {
        border-bottom: 1px solid #004593;
    }
    section#box05 div.cf div.fr{
        position: relative;
    }
    section#box05 div.cf div.fr div.box:before{
        display: block;
        content: '';
        padding-top: 100%;
    }
    section#box05 div.cf div.fr div.box a{
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
    section#box05 div.cf div.fr div.box .txt {
        position: static;
        padding-top: 19.73vw;
        margin: auto;
        width: 100%;
        height: 100%;
    }
    section#box05 div.cf div.fr div.box a {
        display: block;
        width: 100%;
        max-height: 190px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
    }
    section#box05 div.cf div.fr div.box a img {
        width: 13.3vw;
    }
    section#box05 div.cf div.fr div.box a:hover {
        opacity: 0.6;
    }
    section#box05 div.cf div.fr div.box a:hover img {
        opacity: 1;
    }
    section#box05 div.cf div.fr div.box h3 {
        line-height: 1;
        margin-bottom: 5px;
    }
    section#box05 div.cf div.fr div.box p {
        font-size: 2.67vw;
    }
    section#box05 div.cf div.fr div.box p.more {
        margin-top: 10px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
    }
    section#box05 div.cf div.fr div.box:nth-child(1) a h3 img {
        width: 70px;
    }
    section#box05 div.cf div.fr div.box:nth-child(2) a h3 img {
        width: 92px;
    }
    section#box05 div.cf div.fr div.box:nth-child(3) a h3 img {
        width: 52px;
    }
    section#box05 div.cf div.fr div.box:nth-child(4) a h3 img {
        width: 46px;
    }

     section#box05 div.cf div.txt{
      background: none;
      
     }

    div.box04_btm {
        padding-top: 0;
    }
    div.box04_btm div.inner div.box {
        width: 100%;
        float: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.75);
    }
    div.box04_btm div.inner div.box a {
        display: block;
        text-decoration: none;
        padding: 5% 0;
    }
	div.box04_btm div.inner div.box a div {
		display:inline;
	}
    div.box04_btm div.inner div.box+div.box {
        margin: 0;
    }
    div.box04_btm div.inner div.box img {
        width: 53%!important;
        vertical-align: middle;
        display: inline-block!important;
    }
    div.box04_btm div.inner div.box p {
        width: 37%!important;
        display: inline-block!important;
        vertical-align: middle;
        margin-top: 0;
        font-size: 16px;
        padding-right: 0;
        padding-left: 6.923%;
        position: relative !important;
    }
    div.box04_btm div.inner div.box p:before {
        width: 7.2vw;
        right: 1.33vw;
        top: 4vw;
    }
    div.box04_btm div.inner div.box p:after {
        width: 2.8vw;
        top: 3vw;
        right: 1.33vw;
    }
    div.box04_btm div.inner div.box:nth-child(2) p:before {
        top: 10vw;
    }
    div.box04_btm div.inner div.box:nth-child(2) p:after {
        top: 9vw;
    }

    footer {
        border: none;
    }
	
    header .nav_inner dl{
        letter-spacing: 2px;
    }
	section#box01 .news {
		width:auto;
		left:0;
	}
    section#box01 .news p{
            font-size: 11px;
        background: #fff;
        line-height: 30px;
        padding: 0 8px;
        height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 15px;
        float: none;
        width: 100%;
        letter-spacing: 2px;
    }
    section#box01 .news a.btn{
        float: none;
		margin: 0 auto;
    }
    footer div.foot_menu div.inner div.contact a{
        display: block;
        padding: 10px;
        line-height: 1;
    }
    footer div.foot_menu div.inner div.contact a img.onlySP{
            display: inline-block!important;
        vertical-align: middle;
        margin: 0 5px 0 0;
        width: 16px;
        height: 11px;
    }

    section#box05 div.cf div.fr div.box:nth-child(1):before {
        background: url(../../img/index/box05_ph01.jpg) no-repeat center center;
        background-size: cover;
    }

    section#box05 div.cf div.fr div.box:nth-child(2):before {
        background: url(../../img/index/box05_ph02.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box05 div.cf div.fr div.box:nth-child(3):before {
        background: url(../../img/index/box05_ph03.jpg) no-repeat center center;
        background-size: cover;
    }
    section#box05 div.cf div.fr div.box:nth-child(4):before {
        background: url(../../img/index/box05_ph04.jpg) no-repeat center center;
        background-size: cover;
    }
	@media screen and (orientation: landscape) {
	section#box02 div.cf div.fl .box h2,
    section#box03 div.cf div.fl .box h2,
    section#box05 div.cf div.fl .box h2 {
        font-size: 2.698vw;
        margin-bottom: 15px;
    }
    section#box02 div.cf div.fl .box p,
    section#box03 div.cf div.fl .box p,
    section#box05 div.cf div.fl .box p {
        font-size: 1.949vw;
        line-height: 20px;
        margin-bottom: 20px;
    }
    section#box02 div.cf div.fr div.box h3 {
        font-size: 2.473vw;
        margin-bottom: 5px;
    }
    section#box02 div.cf div.fr div.box p {
        font-size: 1.799vw;
    }
	section#box03 div.cf div.fr p {
        font-size: 1.799vw;
        line-height: 20px;
        margin-bottom: 30px;
    }
    section#box03 div.cf div.fr div.cf figure figcaption {
        font-size: 1.945vw;
        color: rgba(255, 255, 255, 0.75);
        text-align: center;
        margin-bottom: 20px;
    }
	section#box03 div.cf div.fr p.copy {
        font-size: 1.945vw;
        line-height: 25px;
        margin-bottom: 0;
    }
	div#box04 .box p {
        width: 86.8%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        text-align: left;
        font-size: 2.321vw;
    }
    div#box04 .box p.copy {
        bottom: 5%;
        font-style: italic;
        font-size: 2.321vw;
    }
    div#box04 .txt {
        background: #4c4948;
        padding: 5.3% 6.6% 10%;
        position: relative;
        font-size: 1.799vw;
    }
	div.box04_btm div.inner div.box p:before {
        width: 4vw;
        right: 1.33vw;
        top: 3vw;
    }
    div.box04_btm div.inner div.box p:after {
        width: 2vw;
        top: 2.4vw;
        right: 1vw;
    }
    div.box04_btm div.inner div.box:nth-child(2) p:before {
        top: 6vw;
    }
    div.box04_btm div.inner div.box:nth-child(2) p:after {
        top: 5.4vw;
    }
    section#box05 div.cf div.fr div.box {
        width: 50%;
        height: 50vw;
        position: relative;
        float: left;
    }
	section#box05 div.cf div.fr div.box .txt {
        position: static;
        padding-top: 19.73vw;
        margin: auto;
        width: 100%;
        height: 100%;
    }
	section#box05 div.cf div.fr div.box a {
        display: block;
        width: 100%;
        max-height: 50vw;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
    }
    section#box05 div.cf div.fr div.box a img {
        width: 7.477vw;
    }
    section#box05 div.cf div.fr div.box p {
        font-size: 1.501vw;
    }
    section#box05 div.cf div.fr div.box p.more {
        margin-top: 10px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5vw;
    }
	
	section#box02 div.cf div.fr div.box:nth-child(2) .txt, section#box02 div.cf div.fr div.box:nth-child(3) .txt {
        height: 57%;
    }
	section#box03 div.cf div.fr p {
		text-align:left;
	}
	.mainvisual {
		height: 100%; // 高さを画面いっぱいに指定する。(vhが効かない場合の対策)
		height: 100vh; // 高さを画面いっぱいに指定する。
		position: relative;  //横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。
		width: 100%; // 横幅もいっぱいに。
		background:(../../img/index/video_sunny_sp.png);
		background-size:cover;
	}
	.mainvisual #video {
		z-index: -1;
		position: absolute;
		/* 真ん中に配置する */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		/* 最小は縦幅に動画のアスペクト比をかける 9/16の数字 */
		min-width: 178.77vh;
		height: auto;
		/* 最小は横幅に動画のアスペクト比をかける 16/9の数字 */
		min-height: 56.25vw;
	}
	}
	@media screen and (orientation: portrait) {
	.mainvisual {
		height: 100%; // 高さを画面いっぱいに指定する。(vhが効かない場合の対策)
		height: 100vh; // 高さを画面いっぱいに指定する。
		position: relative;  //横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。
		width: 100%; // 横幅もいっぱいに。
		background:(../../img/index/video_sunny_sp.png);
		background-size:cover;
	}
	.mainvisual #video {
		z-index: -1;
		position: absolute;
		/* 真ん中に配置する */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
        width: 112%;
		width: 112vw;
		/* 最小は縦幅に動画のアスペクト比をかける 9/16の数字 */
		/*min-width: 177.77vh;*/
        height: 112%;
		height: 112vh;
		/* 最小は横幅に動画のアスペクト比をかける 16/9の数字 */
		/*min-height: 56.25vw;*/
	}
	}



    .notice{
        left: 0;
        right: 0;
        bottom: 5vw;
        width: 90vw;
        margin: auto;
        line-height: 1.2;
            font-size: 2.8vw;
    }

    @media screen and (orientation: landscape) {
    .notice{
        width: 70vw;
            font-size: 2.8vh;
    }
}
}