﻿@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Noto+Sans+JP&display=swap');

body, .font_sans-serif, .font_serif{font-family: 'Josefin Sans', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

.linkStyle{color: #aaa}

#loader::before, #loader::after{position: absolute;content: "";width: 100%;left: 0;background-color: #1a1a1a;height: 51%;transition: 1s}
#loader::before{top: 0}
#loader::after{bottom: 0}
#loader.active::before, #loader.active::after{height: 0}
#loader img{z-index: 1}

#wrap > nav{box-shadow: 0 0 20px rgba(0,0,0,0.2)}
#wrap > nav a{padding-top: 24px}
.cate_list li a{padding-top: 14px}
#wrap > nav a:hover span.en{opacity: 0}
#wrap > nav a:hover span.jp{opacity: 1}

#main_img figure{box-shadow: none}
#main_img .swiper-slide figure{width: 100%}
h1.width_50per{width: 60%!important}
.top_contents{background-image: url(./Dup/img/bg_img.jpg);background-size: cover;background-position: center;position: relative}
.top_contents::before{position: absolute;content: "";top: 10px;left: 10px;right: 10px;bottom: 10px;border: solid 1px #1a1a1a;pointer-events: none}
.top_contents h2{padding-bottom: 20px;padding-top: 80px;background-image: url(./Dup/img/intro.png);background-size: 220px;background-position: top center;background-repeat: no-repeat;margin-bottom: 30px;position: relative}
.top_contents h2::before{position: absolute;content: "";width: 40px;height: 1px;left: 0;right: 0;bottom: 0;background-color: #1a1a1a;margin: auto}
.con2_box .border_so2-r, .con2_box .border_so2-l{border-width: 1px;border-color: #fff}
.con2_box h3{text-align: center;padding-top: 80px;background-size: 180px;background-position: top center;background-repeat: no-repeat;padding-bottom: 20px}
.con2_box:nth-of-type(1) h3{background-image: url(./Dup/img/con2_no1.png)}
.con2_box:nth-of-type(2) h3{background-image: url(./Dup/img/con2_no2.png)}
.con2_box:nth-of-type(3) h3{background-image: url(./Dup/img/con2_no3.png)}

.contents_wrap{background-image: url(./Dup/img/bg_img2.jpg);background-size: cover;background-position: center}
.contents_wrap::before{position: absolute;content: "";top: 10px;left: 0;right: 0;bottom: 10px;border-top: solid 1px #1a1a1a;border-bottom: solid 1px #1a1a1a;pointer-events: none}
.con_no::before{position: absolute;content: "";width: 1px;height: 30px;left: 0;right: 0;bottom: -15px;background-color: #1a1a1a;margin: auto}
.contents_wrap figure{box-shadow: 10px 10px 0 #fff}

.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 20px;text-align: center;padding-bottom: 20px;margin-bottom: 50px;color: #1a1a1a;font-weight: normal;position: relative}
.cate_title::before{position: absolute;content: "";width: 40px;height: 1px;left: 0;right: 0;bottom: -1px;background-color: #1a1a1a;margin: auto}

#top_cms{text-align: left}
#top_cms .cms_title, .more{text-align: center}
.more a:hover{opacity: 0.7}
#cms_4-b .cate_box, .cms_4-b .cate_box{margin: 0 0 30px}


/** tablet 780 **/
@media screen and (max-width: 768px){
#main_img .swiper-slide figure{margin: 0}
.hamburger{top: 12px}
#main{padding-top: 82px!important}
.page_title{padding-top: 50px;padding-bottom: 50px}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
.hamburger{top: 5px}
#main{padding-top: 66px!important}
.top_contents{padding: 50px 20px}
footer > p{padding-left: 20px;text-align: left!important}
}

/** 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}
.pager a{padding-top: 15px}
#wrap > nav a{padding-top: 25px}
}