﻿@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+JP:wght@400;700&family=Raleway:wght@800&family=Roboto:wght@400;500&display=swap');

body{
    font-family: 'Raleway', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font_en, .date, a[href^="mailto:"], .con_no, .catch{
    font-family: 'Raleway', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 800;
}
#main_menu ul li a, a[href^="tel:"] {
    font-family: 'Roboto', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
}


/* ======================================================================================
　　color
======================================================================================== */
.linkStyle{color: #160a0a;transition: opacity .3s;text-decoration: underline}
.linkStyle:hover{opacity: 0.7}

#contents3 .txt_white {
    color: #3a3a3a;
}
.txt_color1 {
    color: #3a3a3a;
}
.border_color1 {
    border-color: #b9b1a1;
}
.border_color3 {
    border-color: #3a3a3a;
}
.txt_color3 {
    color: #a89d73;
}
.bg_color1 {
    background-color: rgb(238, 239, 239);
}
.bg_color4, #contents3 {
    background-color: #f0ece3;
}

footer.border_color4 {
    padding: 100px 10%;
    background-color: #eeefef;
}
.hvr_bg_color1:hover {
    background-color: #555;
}

.hamburger__icon, .hamburger__icon:after, .hamburger__icon:before{
    background-color: #3d3d3d!important;
}
.hamburger.active .hamburger__icon {
    background-color: transparent!important;
}



/* ======================================================================================
　　all
======================================================================================== */
#main_box{
    overflow: hidden;
}
#fakeloader{
    background-color: rgb(215 215 215);
}
.more a{
	background-color: transparent;
    color: #333333;
    border: 2px solid;
}
.more a:hover{
	color: #fff
}
.button:hover::after {
    box-shadow: inset 0 0 0 15em #555;
}


/* ---------- header ---------- */
header #logo{
    max-width: 223px;
}
#main_menu ul li a::before{
    background-color: #a89d73;
}
.fa-envelope:before {
    content: "\f075";
}
.fat-nav li a {
    font-weight: 600;
}



/* ======================================================================================
　　top
======================================================================================== */

/* ---------- main_img ---------- */
.catch {
    z-index: 5;
    top: 8%;
    left: 8%;
    width: 31%;
    max-width: 345px;
}
.catch img{
    max-height: 100%!important;
    min-height: 100%!important;
    object-fit: unset!important;
}


/* ---------- contents ---------- */
.con_no {
    font-size: 35px;
}
.con_no::before{
    height: 2px;
}

#contents2 {
    padding: 100px 10% 300px;
}
#contents3 .grid_6:first-of-type{
    margin-top: -185px;
}
.item.top {
    width: 124px;
    top: -25%;
    right: 6%;
}
.item.bottom {
    width: 131px;
    bottom: -4%;
    left: 6%;
    transform: scale(-1,1);
}



/* ======================================================================================
　　under
======================================================================================== */
.cms_title h2 {
    font-size: 35px;
    letter-spacing: 3px;
}
#page_title h2{
    font-size: 35px;
    line-height: 1;
    letter-spacing: 3px;
}


/* ---------- cms4 ---------- */
.v_type1 .triangle {
    display: block;
    border: #000 solid 2px;
    box-shadow: 5px 5px 0 0 #e2e2e2;
    position: relative;
}
.v_type1 .item1 {
    position: absolute;
    background-image: url(../dup/img/item2.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: 20px;
    top: -32px;
    width: 100px;
    height: 63px;
}
.v_type1 .triangle:nth-child(even) .item1 {
    background-image: url(../dup/img/item3.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: auto;
    left: 21px;
    top: -32px;
    width: 68px;
    height: 63px;
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}
.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: #000 transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}

/* ---------- cms5 ---------- */
.qa_type3 .qa_no{
	left: 20px;
	top: 15px
}
.qa_type3 .cate_box .box_title1, .qa_type3 .cate_box .box_txt1{
	min-height: 1.5em
}
.qa_type3 .box_q{
	background-image: url(./Dup/img/icon_q.png);
	background-repeat: no-repeat;
    background-position: top 2px left;
    background-size: 90px;
}
.qa_type3 .box_a{
	background-image: url(./Dup/img/icon_a.png);
	background-repeat: no-repeat;
    background-position: top 2px right;
    background-size: 90px;
}
.qa_type3 .box_q, .qa_type3 .box_a{
	padding: 0 120px 30px
}
.qa_type3 .box_q .box_title1::before, .qa_type3 .box_a .box_txt1::before{
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(0, 0, 0, 0);
}
.qa_type3 .box_q .box_title1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 10px;
    border-right-width: 15px;
    margin-top: -10px;
    border-right-color: #a89d73;
    right: 100%;
    top: 34px;
}
.qa_type3 .box_a .box_txt1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 15px;
    border-right-width: 10px;
    margin-top: -10px;
    border-left-color: #f5efe3;
    left: 100%;
    top: 35px;
}
.qa_type3 .qa_no::before{
    display: none;
}
@media screen and (max-width: 667px){
.qa_type3 .box_q {
    padding: 0 0 30px 95px;
}
.qa_type3 .box_a{
    padding: 0 95px 30px 0;
}
.qa_type3 .qa_no{
    top: 19px;
}
.qa_type3 .box_q,.qa_type3 .box_a{
    background-size: 74px;
}
}





/* ======================================================================================
　　window size
======================================================================================== */

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
header #logo {
    padding: 0 10px 7px;
    max-width: 247px;
}
header .head_banner {
    display: none;
    left: auto;
    right: 0;
    bottom: 148px;
    margin: auto;
    width: 53px;
    height: 147px;
    letter-spacing: 2px;
    line-height: 2.5;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
header .head_banner a {
    border-radius: 5px 0 0 5px;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
header #logo {
    padding: 0px 10px 2px;
    max-width: 197px;
}
.hamburger {
    top: 13px;
}
#contents1 {
    padding: 49px 10% 74px;
}
#contents2 {
    padding: 68px 10% 300px;
}
.con_no {
    font-size: 25px;
}
.item.top {
    width: 109px;
}
.item.bottom {
    width: 117px;
    bottom: -3%;
}

.v_type1 .item1 {
    right: 13px;
    top: -32px;
    width: 82px;
}
.v_type1 .triangle:nth-child(even) .item1 {
    left: 11px;
    top: -27px;
    width: 57px;
    height: 63px;
}

footer.border_color4{
    text-align: center;
    padding-bottom: 36px;
}
.footer_cms {
    display: inline-block;
    text-align: left;
}
}






/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 400px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner .close_bt {
    position: absolute;
    bottom: 135px;
    right: 375px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: 0.5s;
    background-color: #fff;
    border: solid 2px #3c3c3c;
    z-index: 11;
    cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #3c3c3c;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close{right: -450px;}
.fix_banner.close2{right: -450px;}

@media  screen and (max-width: 768px){
.fix_banner{max-width: 300px;}
.fix_banner .close_bt{bottom: 80px;right: 280px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 250px;}
.fix_banner .close_bt {
    width: 25px;
    height: 25px;
    bottom: 78px;
    right: 230px;
}
.fix_banner .close_bt span{
	width: 25px;
	height: 25px;
}
}
/* 閉じるボタン付き追従バナー end */
