﻿@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Shippori+Mincho+B1&display=swap');
/* ----------　all　---------- */
:root{
    --color1: #001b16;
    --color2: #f3efeb;
    --color3: #eee3d8;
}

/* color */
.txt_color1, .txt_color3{color: var(--color1)} /* メインカラー */
.txt_color2{color: var(--color2)} /* サブカラー */

/* background-color */
.bg_color1{background-color: var(--color1)} /* メインカラー */
.bg_color2{background-color: var(--color2)} /* サブカラー1 */
.bg_color3{background-color: var(--color3)} /* サブカラー2 */

.bg_base{background-color: #f2f4f4} /* ベースカラー　※transparent以外（白背景の場合　#fff） */


/* border-color ※!important */
.border_color1{border-color: var(--color1)}
.border_color2{border-color: var(--color2)}
.border_color3{border-color:  var(--color3)}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color1:hover, .hvr_txt_color3:hover{color: var(--color1)} /* メインカラー */
.hvr_txt_color2:hover{color: var(--color2)} /* サブカラー1 */

/* background-color */
.hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー1 */
.hvr_bg_color3:hover{background-color: var(--color3)} /* サブカラー2 */



/* border-color ※!important */
.hvr_border_color1:hover{border-color: var(--color1)}
.hvr_border_color2:hover{border-color: var(--color2)}
.hvr_border_color3:hover{border-color: var(--color3)}

.linkStyle{
	color:#d73350;
	text-decoration: underline;
}
.linkStyle:hover{
	color:#d73350;
	opacity: 0.7;
	transition: all 0.5s;
}

body, .font_sans-seri {
    font-family: "Domine", "Shippori Mincho B1","游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

/* nav */


/* footer */


/* ----------　TOP　---------- */

/* main-img */

.cachcopy {
    left: 0;
    right: 0;
    margin: auto;
    bottom: 35%;
    width: 90%;
}

#main_img:before {
    content: "";
    width: 80%;
    height: 100%;
    max-width: 1280px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(../img/fv_effect.png);
    background-repeat: no-repeat;
    background-size: contain;
}

/* top */

#top_intro .intro_title1 {
        height: 500px;
}

#top_intro .intro_title1 img {
    height: 100%;
}

.top_con_wrap {
    background-image: url(../img/top_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.dish1 {
    bottom: -10%;
    right: -10%;
}

.top_link_box {
    z-index: 2;
}

#top_link:before {
    content: "";
    display: block;
    width: 30%;
    height: 50%;
    position: absolute;
    bottom: -1%;
    left: 0%;
    background: url(../img/bike.png) no-repeat;
    background-position: bottom;
    z-index: 1;
    background-size: contain;
}

.light1 {
    z-index: 0;
    right: -15%;
    top: -15%;
    pointer-events: none;
}

.light2 {
    top: 15%;
    z-index: 2;
    pointer-events: none;
    transform: rotate(-155deg);
    right: 35%;
    opacity: 0.7;
}

.light3 {
    bottom: 10%;
    z-index: 0;
    pointer-events: none;
    transform: rotate(3deg);
    right: 23%;
    opacity: 0.7;
}

.light4 {
    bottom: -15%;
    z-index: 1;
    pointer-events: none;
    transform: rotate(3deg);
    left: -5%;
    opacity: 0.7;
}

/* top-cms */

.link_type2 .cate_box a {
    color: #fff;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: #001b16;
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}

/* ----------　下層ページ　---------- */

#page_title {
    background-position: bottom;
}

/* 会社情報 */
/* お問い合わせ */
/* プライバシーポリシー */
/* サイトマップ */


/*-------------------------------------------------------
			          タブレット
-------------------------------------------------------*/
@media screen and (max-width: 768px){
    
.light1 {
    right: -15%;
    top: -8%;
}

.light2 {
    top: 35%;
    transform: rotate(20deg);
    right: 30%;
    width: 60%!important;
}

.light3 {
    bottom: 10%;
    transform: rotate(9deg);
    right: -16%;
}

.light4 {
    bottom: -8%;
    transform: rotate(3deg);
    left: -13%;
}
    
}

/*-------------------------------------------------------
		            	スマホ
-------------------------------------------------------*/
@media screen and (max-width: 667px){

#main_img {
    height: 75vh;
}

.cachcopy {
    bottom: 30%;
    width: 95%;
}

#main_img:before {
    width: 120%;
    height: 60%;
    bottom: 15%;
}
    
#top_intro .con_no {
        white-space: nowrap;
}
    
#top_intro .intro_title1 {
        height: auto;
}
    
#top_intro .intro_title1 img {
    width: 100%;
    height: auto;
}

#top_link:before {
    height: 25%;
    width: 65%;
    left: 0;
    right: 0;
    margin: auto;
}

.dish1 {
    width: 90% !important;
    left: 0;
    right: 0;
    bottom: -6%;}
    
.light1 {
        right: -15%;
        top: 4%;
        z-index: 1;
        width: 80% !important;
    }
    
   .light2 {
        top: 20%;
        transform: rotate(210deg);
        right: auto;
        width: 90% !important;
        left: -25%;
    }
    
.light3 {
        bottom: 40%;
        transform: rotate(9deg);
        right: -25%;
        z-index: 1;
        width: 85% !important;
    }
    
    .light4 {
        bottom: 4%;
        transform: rotate(3deg);
        left: 0%;
        width: 90% !important;
        opacity: 0.5;
    }
    
}