@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Spartan:wght@500&display=swap');

body, .font_sans-serif, .font_serif{font-family: 'Spartan', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

/* color */
.txt_color1{color: #071b4c} /* メインカラー */
.txt_color2{color: #f2f2f2} /* サブカラー */
.txt_color3{color: #0baa84} /* アクセントカラー1 */
.txt_color4{color: #e6e6e6} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #071b4c} /* メインカラー */
.bg_color2{background-color: #f2f2f2} /* サブカラー */
.bg_color3{background-color: #0baa84} /* アクセントカラー1 */
.bg_color4{background-color: #e6e6e6} /* アクセントカラー2 */


/* border-color ※!important */
.border_color1{border-color: #071b4c}
.border_color2{border-color: #f2f2f2}
.border_color3{border-color: #0baa84}
.border_color4{border-color: #e6e6e6}

/* hover ---------------------------------------------------------------------------------------------*/

/* color */
.hvr_txt_color1:hover{color: #071b4c} /* メインカラー */
.hvr_txt_color2:hover{color: #f2f2f2} /* サブカラー */
.hvr_txt_color3:hover{color: #0baa84} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #e6e6e6} /* アクセントカラー2 */

/* background-color */
.hvr_bg_color1:hover{background-color: #071b4c} /* メインカラー */
.hvr_bg_color2:hover{background-color: #f2f2f2} /* サブカラー */
.hvr_bg_color3:hover{background-color: #0baa84} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #e6e6e6} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #071b4c}
.hvr_border_color2:hover{border-color: #f2f2f2}
.hvr_border_color3:hover{border-color: #0baa84}
.hvr_border_color4:hover{border-color: #e6e6e6}

/* other ---------------------------------------------------------------------------------------------*/

.linkStyle{transition: 0.3s;color: #0baa84}
.linkStyle:hover{opacity: 0.7}

main.bg_color4{background-color: transparent}
main > iframe{display: block;}
#bottom_menu{padding-top: 5px}
#main_img{max-height: 80vh;height: 60vw}
#global-nav{width: 93%;margin-left: auto;margin-right: auto}
#global-nav li{width: auto!important}
#global-nav li a{display: block;padding: 10px}
#logo h1{max-width: 200px}
#header .border_so2-b{border-width: 1px}

#page_title{margin-bottom: 100px;padding-top: 80px}
#page_title .font_bold, #top_cms .cms_title .font_bold{font-weight: normal}
#page_title .border_so5-b, #top_cms .cms_title.border_so5-b{border-bottom: none}
#page_title .border_so1-b{padding-bottom: 30px;position: relative;margin-bottom: 0;border-color: #ddd}
#page_title .border_so1-b::before{position: absolute;content: "";width: 1px;height: 40px;left: 0;right: 0;bottom: -20px;margin: auto;background-color: #071b4c}

#intro, #contents .box{position: relative;z-index: 0}
#intro #intro_txt, #contents .box{padding-top: 60px;padding-bottom: 140px}
#intro::before, #contents .box::before, #contents .box:nth-child(3)::after{position: absolute;content: "";width: 100%;height: 80px;top: -79px;left: 0;z-index: 1;background-size: 100% 100%}
#intro::before{background-image: url(./Dup/img/bg_img1.png)}
#intro::after{position: absolute;content: "";width: 320px;height: 480px;right: 0;bottom: -100px;background-image: url(./Dup/img/img1.png);background-size: contain;z-index: 2}
#intro #intro_txt{position: relative;z-index: 3}

#contents .box:nth-child(1){background-image: url(./Dup/img/img2.png);background-size: 300px;background-position: right 50px bottom 100px;background-repeat: no-repeat}
#contents .box:nth-child(2){background-image: url(./Dup/img/img3.png);background-size: 300px;background-position: left 50px bottom 100px;background-repeat: no-repeat}
#contents .box:nth-child(3){background-image: url(./Dup/img/img4.png);background-size: 300px;background-position: right 50px bottom 100px;background-repeat: no-repeat}

#contents .box:nth-child(1)::before{background-image: url(./Dup/img/bg_img2.png)}
#contents .box:nth-child(2)::before{background-image: url(./Dup/img/bg_img3.png)}
#contents .box:nth-child(3)::before{background-image: url(./Dup/img/bg_img2.png)}
#contents .box:nth-child(3)::after{background-image: url(./Dup/img/bg_img1.png);top: auto;bottom: -1px}

.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 24px;text-align: left;padding-bottom: 5px;margin-bottom: 50px;border-bottom: solid 1px #071b4c;color: #071b4c;font-weight: normal;position: relative}
.cate_title::before{position: absolute;content: "";width: 50px;height: 5px;background-color: #071b4c;left: 0;bottom: -5px}


/** tablet 780 **/
@media screen and (max-width: 768px){
#logo h1{max-width: 150px;margin: auto}
#main_img{max-height: 60vw}
#page_title{padding-top: 20px}
#intro #intro_txt, #contents .box{padding-top:  50px;padding-bottom: calc(10vw + 50px)}
#intro::before, #contents .box::before, #contents .box:nth-child(3)::after{height: 10vw;top: calc(-10vw + 1px)}
#contents .box:nth-child(3)::after{top: auto}
#intro::after{bottom: -70px}
#contents .box:nth-child(1), #contents .box:nth-child(2), #contents .box:nth-child(3){background-size: 200px;}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#logo h1{max-width: 100px;padding: 0}
#intro::after{width: 250px;height: 375px}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
body, .font_sans-serif, .font_serif{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}
}