﻿@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300&family=Noto+Sans+JP:wght@300&display=swap');

body, html{font-size: 16px}

body, .font_sans-serif{font-family: 'Kumbh Sans', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

/* color */
.txt_color_nomal{color: #1a1a1a}
.txt_color1{color: #1a1a1a} /* メインカラー */
.txt_color2{color: #f2f2f2} /* サブカラー */
.txt_color3{color: #999999} /* アクセントカラー1 */
.txt_color4{color: #e6e6e6} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #1a1a1a} /* メインカラー */
.bg_color2{background-color: #f2f2f2} /* サブカラー */
.bg_color3{background-color: #999999} /* アクセントカラー1 */
.bg_color4{background-color: #e6e6e6} /* アクセントカラー2 */


/* border-color ※!important */
.border_color1{border-color: #1a1a1a}
.border_color2{border-color: #f2f2f2}
.border_color3{border-color: #999999}
.border_color4{border-color: #e6e6e6}

/* hover ---------------------------------------------------------------------------------------------*/

/* color */
.hvr_.txt_color_nomal:hover{color: #1a1a1a}
.hvr_txt_color1:hover{color: #1a1a1a} /* メインカラー */
.hvr_txt_color2:hover{color: #f2f2f2} /* サブカラー */
.hvr_txt_color3:hover{color: #999999} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #e6e6e6} /* アクセントカラー2 */

/* background-color */
.hvr_bg_color1:hover{background-color: #1a1a1a} /* メインカラー */
.hvr_bg_color2:hover{background-color: #f2f2f2} /* サブカラー */
.hvr_bg_color3:hover{background-color: #999999} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #e6e6e6} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #1a1a1a}
.hvr_border_color2:hover{border-color: #f2f2f2}
.hvr_border_color3:hover{border-color: #999999}
.hvr_border_color4:hover{border-color: #e6e6e6}

/* other ---------------------------------------------------------------------------------------------*/

.linkStyle{transition: 0.3s;color: #666;border-bottom: solid 1px #e6e6e6}
.linkStyle:hover{opacity: 0.7}

#pc_nav{font-size: 14px}
.index #pc_nav{font-size: 16px}
#pc_nav .jp, #sp_nav .jp{top: 10px;left: 0}
.index #pc_nav .jp{left: 10px}
#sp_nav .jp{top: 5px}
#pc_nav a:hover .en, #sp_nav a:hover .en{opacity: 0}
#pc_nav a:hover .jp, #sp_nav a:hover .jp{opacity: 1}

.contents_wrap .contents_bg, header > .page_title_bg{background-image: url(./Dup/img/bg_img.png)}

#logo img{max-width: 200px}
.trans_logo{padding: 15px 30px}
.trans_logo img{max-width: 150px}
#header{position: relative}
.index #header::before{position: absolute;content: "";width: 80%;height: 55%;bottom: 20%;left: 0;background-color: #f2f2f2;background-image: url(./Dup/img/bg_img2.png)}
.banner_wrap{z-index: 5;top: 100px;right: 0}

#contents1 .con1_right, #contents1 .con1_right .con1_title, #contents1 .con1_right p, #contents3 .con3_right{position: relative}
#contents1 .con1_right .con1_title, #contents1 .con1_right p{z-index: 1}
#contents1 .con1_right::before{position: absolute;content: "";width: 80%;height: calc(100% - 180px);top: 0;right: 0;background-color: #f2f2f2;background-image: url(./Dup/img/bg_img2.png)}
#contents1 .con1_right::after{position: absolute;content: "";width: 300px;height: 180px;right: 50px;bottom: 110px;background-image: url(./Dup/img/con1_bg.png);background-size: contain;background-repeat: no-repeat}
#contents2 .con2_wrap{border: solid 1px #1a1a1a;background-image: url(./Dup/img/img1.png);background-size: 180px;background-position: top -10px left 0;background-repeat: no-repeat}
#contents2 .con2_right img, #contents3 .con3_right img{box-shadow: 20px 20px 0 rgba(153,153,153,0.2)}
#contents3 .con3_right::before{position: absolute;content: "";width: 300px;height: 180px;top: -100px;left: -30px;background-image: url(./Dup/img/con3_bg.png);background-size: contain;background-repeat: no-repeat;z-index: 1}

#page_title .page_title_box{background-image: url(./Dup/img/img2.png);background-size: 180px;background-position: bottom -10px right 0;background-repeat: no-repeat}
.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 24px;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;background-color: #1a1a1a;left: 0;right: 0;bottom: 0;margin: auto}

.banner_wrap_under div:first-child a{background-color: #E5B27B}
.banner_wrap_under div:last-child a{background-color: #C5C9CD}
#page07 .info_map{height: auto}
#page07 .info_map iframe{height: 400px;border: solid 1px #1a1a1a}
#page07 .info_map p{background-color: transparent}
#page07 .info_map p::before{position: absolute;content: "";width: 1px;height: 30px;background-color: #1a1a1a;left: 0;right: 0;bottom: -40px;margin: auto}

/** tablet 780 **/
@media screen and (max-width: 768px){
#sp_nav a:hover .en{opacity: 1}
.trans_logo{background-image: url(./Dup/img/bg_img.png)}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#contents1 .con1_right::after{width: 200px;height: 150px;right: 20px;bottom: 0}
#contents3 .con3_right::before{width: 200px;height: 150px;top: -70px;left: -30px;right: auto}
#contents3 .con3_wrap{padding-left: 20px;padding-right: 20px}
#page_title .page_title_box{background-size: 150px}
.cate_title{font-size: 20px}
.banner_wrap{width: calc(100% - 50px);top: auto;bottom: 0;right: auto;left: 0}
.banner_wrap div:first-child a{height: 50px;background-color: #E5B27B}
.banner_wrap div:last-child a{height: 50px;background-color: #C5C9CD}
footer{padding-bottom: 60px}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
body, .font_sans-serif{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}
.cate_title{padding-bottom: 20px!important}
}