/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho&display=swap');

:root{
    --font-jp: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: "Shippori Mincho","游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp);
}
.liana, .con_title, .font_en, a[href^="tel:"], .en, #pc_nav li a, #footer_nav li a, #linkBox .title, .hgs{
    font-family: var(--font-en)!important;
}

/* ---------- color ---------- */
.intro_txt, .page1 .blur .txt_white, .page .blur .txt_white {
    color: #212121;
}
.more .more_item, .top_title h2.right, .top_title h2.left, #page_title .en, .cate_list a{
    color: #fff!important;
}
.txt_color2, .hvr_txt_color2:hover {
    color: var(--color3);
}



/* ---------- all ---------- */
#loading_logo {
    top: 45%;
}
#loading .kvArea .img_box img {
    max-width: 250px;
}
.overlay .overlay-nav .top .en {
    font-size: 20px;
}
.overlay:before {
    background-color: rgb(255 213 167 / 30%)!important;
}
#logo {
    max-width: 119px;
    padding-left: 20px;
    transform: translate(14px, 23px) scale(1.3);
    transition: all .5s;
}
header.scr_header #logo {
    max-width: 87px;
    transform: none;
}
.blur{
    background: url( "../img/bg2.png" ) center / 2000px repeat;
}
#intro{
    background: url( "../img/bg1.jpg" ) center / cover no-repeat;
}
.top_cms_box {
    background: url( "../img/bg3.jpg" ) center / 1000px repeat;
}
#logo2{
    max-width: 90px;
    margin: 0 auto 30px;
}

#footer_info{
    background-color: #0f1110b5;
}
#footer_info .bg_black{
    background-color: var(--color1)!important;
}
#footer_info .bg_black:hover{
    opacity: 0.7;
}
#copyright{
    background-color: var(--color3);
}
.map {
    height: 456px;
}


/* anim */
.kaku {
    animation: kaku 1s infinite steps(2);
}
 @keyframes kaku {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-10deg); }
  }


/* ---------- top ---------- */
#main_img .sns_links, #intro .intro_photo h2 {
    display: none;
}

#main_img{
    max-height: 51vw;
    background: url( "../img/fv_bg.jpg" ) center / cover no-repeat;
}
.fv_txt1{
    width: min(90%, 1200px);
}
.fv_txt1 {
    width: min(84%, 2000px);
    transform: none;
    top: auto;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -11%;
    z-index: 0 !important;
}
/*.fv_txt1 {
    width: min(58%, 1000px);
    transform: none;
    top: 51%;
    left: 46%;
    transform: translate(-50%, -50%);
    margin: auto;
    bottom: -11%;
    z-index: 0 !important;
}*/
/*.fv_txt1 {
    width: min(94%, 1500px);
    transform: none;
    top: auto;
    left: -48px;
    right: 0;
    margin: auto;
    bottom: -93px;
    z-index: 0 !important;
}*/
.fv_txt2 {
    width: min(13%, 247px);
    right: 5%;
    bottom: 11px;
}
.intro_title{
    font-size: clamp(30px, 3vw, 50px);
    font-family: var(--font-en);
    font-weight: bold;
    line-height: 1.3;
    text-align: left;
    color: #2d2d2d;
}
#intro .intro_right {
    width: calc(60% - 50px);
}
#intro .intro_photo {
    width: calc(40% - 50px);
}
.item1 {
    transform: translate(-38%, -15%);
    width: calc(100% + 80%);
    max-width: 850px;
}
.top_title{
    z-index: -1;
    height: 459px;
}
#contents .con_title {
    font-size: clamp(30px, 3vw, 39px);
    margin-bottom: 36px;
    line-height: 1.3;
}
.top_title .rotate_txt span {
    transform: none;
    display: inline-block;
}
.top_title h2.right, .top_title h2.left {
    right: 0;
    left: 0;
    text-align: center;
    font-size: 100px;
}
.top_title h2 > span:before{
    right: 0;
    left: 0;
    margin: auto;
    bottom: -500px;
    width: 3px;
    height: 235px;
    top: 0;
}
#top_cms_wrap{
    position: relative;
}
#top_cms_wrap::before {
    z-index: 2;
    content: '';
    display: inline-block;
    width: 36vw;
    height: 33vw;
    background-image: url(../img/item3.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -86px;
    top: -188px;
    transform: rotate(-21deg);
}
.more .more_item{
    transition: all .5s;
}
.more .more_item:hover:before {
    left: 0;
    width: 100%;
}
.more .more_item:hover .icon-right.after:before, .more .more_item:hover .icon-right.after:after{
display: none;
}
.icon-right:after{
    top: 22px;
}
.more .more_item:hover:after {
    left: 0%;
    width: 0;
}
.more .more_item:hover{
    opacity: 0.6;
}
.cms_2-g .box_wrap {
    box-shadow: rgba(0, 0, 0, 0) 0px 5px 15px 0px;
    background: none;
}

/* linkBox */
#linkBox {
    margin: 136px auto 104px;
    width: 90%;
    max-width: 1400px;
}
#linkBox .box {
    height: 100%;
    /*overflow: hidden;*/
    overflow: visible;
    padding: 0 15px;
    position: relative;
}
#linkBox .box a {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* box-shadow: 0 4px 47px rgb(0 0 0 / 6%); */
    transition: all .5s;
}
#linkBox .box a:hover {
    opacity: 0.7;
}
#linkBox .titleBox {
    /* background-color: #fff; */
    /* height: 100%; */
    width: 40%;
    width: 100%;
    display: flex;
    order: 2;
    align-items: center;
    text-align: left;
    position: relative;
    position: absolute;
    top: 80%;
    /* z-index: 7; */
    left: 0;
    right: 0;
    margin: auto;
}
#linkBox .title {
    color: #080808;
    margin: auto;
    width: 71%;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
    padding: 20px;
    background-color: #fff;
    position: absolute;
    bottom: -47px;
    left: -1px;
    /* right: 0; */
    z-index: 1;
}
#linkBox .title::before {
    position: absolute;
    content: "";
    width: 30%;
    height: 6px;
    background-color: #0177c1;
    background: var(--color1);
    left: 0;
    /* right: 0; */
    margin: auto;
    bottom: 90px;
}
#linkBox .sub_title {
    color: var(--color1);
    font-weight: normal;
    font-size: 15px;
}
#linkBox .obje_rectangle {
    /*width: 60%;*/
    width: 100%;
    padding-top: 88.66%;
    position: relative;
    display: flex;
    order: 1;
}
#linkBox .obje_square{
	padding-top: 100%;
    position: relative;
}
#linkBox .obje_rectangle img, .obje_square img{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: cover;
}
a .hvr_img_zoom {
    -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
a:hover .hvr_img_zoom{
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}
@media screen and (max-width: 768px){
#linkBox {
    width: 80%;
    margin: 100px auto 50px;
}
#linkBox .box {
    width: 85% !important;
    margin: 0 auto 30px;
}
#linkBox .obje_rectangle {
    padding-top: 48.66%;
}
#linkBox .title {
    width: 42%;
}
#linkBox .titleBox{
    top: 69%;
    z-index: 3;
}
#linkBox .title::before {
    width: 45%;
}
#linkBox .obje_rectangle:before{
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
}
@media screen and (max-width: 667px){
#linkBox {
    width: 100%;
    margin: 82px auto 50px;
}
#linkBox .title {
    font-size: 19px;
    padding: 15px;
    width: 58%;
}
#linkBox .title::before {
    width: 32%;
    height: 5px;
    bottom: 74px;
}
#linkBox .obje_rectangle {
    padding-top: 70.66%;
}
#linkBox .box {
    width: 90% !important;
    margin: 0 auto 30px;
}
}




/* ---------- under ---------- */
.yoyaku_bnr  {
    width: min(90%, 400px);
    margin: 0 auto 50px;
}
#contact_tel a{
    background-color: #ffffff;
    border-color: #ffffff;
}
#page_title .jp{
    display: none;
}
#page_title .en{
    top: -109px;
}
#cms_3-b .cate_title{
    background-color: var(--color3)!important;
    color: #fff !important;
    border-color: var(--color1)!important;
}
#cms_3-b .txt_color4, #cms_3-b .hvr_txt_color4:hover {
    color: var(--color1)!important;
}
#cms_3-b .border_color2, #cms_3-b .hvr_border_color2:hover {
    border-color: var(--color1)!important;
}
#cms_7-a .cate_box{
    border-color: #fff!important;
}



/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#loading_logo {
    top: 43%;
    left: 50%;
}
#loading .kvArea .img_box img {
    max-width: 200px;
}
#logo {
    max-width: 119px;
    transform: none;
}
header.scr_header #logo {
    max-width: 68px;
}
#main_img {
    max-height: 57vw;
}
.fv_txt2 {
    width: min(16%, 247px);
    right: 2%;
    bottom: 11px;
}
#main_img .scroll{
    display: none;
}
.item1 {
    transform: translate(-38%, -9%);
    width: calc(100% + 127%);
}
.top_title {
    height: 300px;
}
.top_title h2 > span {
    padding-top: 0;
}
.top_title h2 > span:before {
    bottom: -300px;
    height: 150px;
    top: 0;
}
#contents_wrap{
    padding: 100px 5%;
}
#logo2{
    max-width: 80px;
    margin: 20px auto 30px;
}
.map {
    height: 532px;
}
#page_title_img {
    height: 350px;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
#loading_logo {
    top: 43%;
    left: 50%;
}
#loading .kvArea .img_box img {
    max-width: 150px;
}
#logo {
    max-width: 53px;
    transform: translate(14px, 18px) scale(1.5);
    padding-left: 4px;
}
header.scr_header #logo {
    max-width: 47px;
}
header.scr_header #header{
    padding: 5px;
}
#main_img {
    max-height: 158vw;
    background: url(../img/fv_bg_sp.jpg) center / cover no-repeat;
}
.fv_txt1 {
    width: 100%;
    bottom: 0;
}
.item1 {
    transform: translate(-19%, 0%);
    width: 107%;
    position: relative;
    margin-bottom: -43%;
}
#top_cms_wrap::before {
    width: 80vw;
    height: 64vw;
    right: -86px;
    top: -24px;
}
.top_cms_box {
    background: url(../img/bg3.jpg) center / 500px repeat;
}
#intro .intro_right {
    width: 100%;
}
.intro_title {
    font-size: 20px;
}
.top_title {
    height: 251px;
}
.top_title h2.right, .top_title h2.left{
    font-size: 59px;
}
.top_title h2 > span {
    padding-top: 0;
}
.top_title h2 > span:before {
    bottom: -258px;
    width: 2px;
    height: 115px;
}
#intro_wrap{
    padding-bottom: 49px;
}
.txt_item1, .txt_item2{
    width: 90%;
    margin: auto;
}
.intro_title {
    text-align: center;
}
#logo2{
    max-width: 109px;
    margin: 0 auto 30px;
}
.map {
    height: 300px;
}
#page_title_img {
    height: 250px;
}
#page_title .en {
    top: -48px;
    font-size: 32px;
    padding-left: 14px;
}
.page_container {
        padding-left: 5px;
    padding-right: 5px;
}
#cms_3-b .cate_box{
    margin-bottom: 20px;
}
}



/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 9px;
    right: 67px;
    z-index: 10;
    width: 70%;
    max-width: 320px;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
}
#fix_bnr.scroll{
    opacity: 1;
    pointer-events: auto;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@media screen and (max-width: 768px){
#fix_bnr{
    right: 15px;
}
#fix_bnr.close{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 57%!important;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
}
}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/