﻿/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&family=Yusei+Magic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
:root{
	--color1: #dfc220;
	--color3: #df2020;
	--color4: #f5f2e9;
	--bace-color: #b9cd75;
	--font-jp: 'Rammetto One', cursive, 'Noto Sans JP', "游ゴシック Medium", sans-serif;
}

#intro .intro_photo h2, #intro .intro_right .intro_title2, #contents .con_title, .slash{
    font-family: var(--font-jp);
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
/*.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6}*/
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
/*.txt_color4, .hvr_txt_color4:hover{color: #c9baa9}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
/*.bg_color2, .hvr_bg_color2:hover{background-color: #e6e6e6}*/
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
/*.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}*/
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: #c9baa9}*/

#loading, main.blur{background-color: var(--bace-color);}
#loading_logo {
    max-width: 200px;
}

/* header */


/* footer */



/* top ----------------------------------------------------------------*/
.filter1{background-color: #218117;}
.filter1{z-index: 3;}
.filter2{z-index: 2;}
.filter3{z-index: 1;}

/* main img */
#main_img:before {z-index: 1;}
.catch {
    top: 45%;
    z-index: 1;
    width: 80%;
    max-width: 900px;
}

/* main */

/* intro */
#intro{
    background-image: url('./Dup/img/intro_bg.png'),url('./Dup/img/bg_bottom.png');
    background-position: top right, bottom left;
    background-size: 40%;
    background-repeat: no-repeat;
}
#intro .rotate_txt span {line-height: 0.88;}
#intro .intro_photo h2 {
    z-index: 4;
}
.loopimg{
    width: 100%;
    height: 35px;
    display: block;
    background-color: #000;
}
.loopimg::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 35px;
	background-image: url("../dup/img/loop.png");
	background-size: auto 100%;
	background-position-y: 0;
	background-position-x: 0;
	background-repeat: repeat-x;
	animation: loop 30s linear infinite;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -1000px;}
}
#intro .intro_right .intro_title2{font-size: 30px;}

/* contents */
#contents{
    background-image: url('./Dup/img/bg_top.png'),url('./Dup/img/con_bg.png');
    background-position: top right, bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
}
#contents_wrap{margin-bottom: 0;}
.top_title .slash:before, .top_title .slash:after {background-color: #fff;}
.num .slash:before, .num .slash:after {background-color: var(--color3);}
#contents .con_title {
    margin-bottom: 10px;
}
#contents .con_txt span{
    background-color: #fff;
}
.con_illust1 {
    top: -13%;
    right: -8%;
    width: 30%;
    max-width: 250px;
    z-index: 4;
}
.con_illust2{
    bottom: -10%;
    left: -5%;
    width: 30%;
    max-width: 250px;
    z-index: 4;
}
.con_illust3{
    bottom: -10%;
    right: -5%;
    width: 22%;
    max-width: 170px;
    z-index: 4;
}

/* topcms */


/* under page ----------------------------------------------------------------*/
.cate_list:before{
    background-color: var(--color1)!important;
}
.page .blur{
    background-image: url('./Dup/img/bg_top.png'),url('./Dup/img/bg_bottom.png');
    background-position: top right, bottom left;
    background-size: 35%;
    background-repeat: no-repeat;
}

/* cms1 */
.pager li a:hover {
    background-color: rgb(223 194 32)!important;
}

/* cms2 */

/* cms3 */

/* cms4 */
#cms_3-g .cate:nth-of-type(1) .box_wrap .cate_box:first-child .box_title1 .title_item{
    max-width: 100%;
    color: #1a1a1a;
}
#cms_3-g .cate:nth-of-type(1) .box_wrap .cate_box:first-child .box_title1 .border{
    display: none;
}

/* cms5 */
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.g_type6 .cate_box{width: 49%!important;}
}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.g_type6 .box_wrap{	width: 100%!important;margin-left: 8px;}
.g_type6 .cate_box{width: 48%!important;}
}



/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#loading_logo {max-width: 120px;}
#header #logo a img{max-width: 270px;}
#intro {background-size: 60%;}
#contents {background-size: 70%;}

.page .blur {background-size: 60%;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#loading_logo {max-width: 90px;}
#header #logo a img{max-width: 250px;}
.ip678 #video {height: 35vh;}
.loopimg {height: 20px;}
.loopimg::before {
    height: 20px;
    animation: loop 50s linear infinite;
}
.con_illust1 {
    top: -22%;
    right: -10%;
    width: 40%;
}
.con_illust2 {
    bottom: -15%;
    left: -10%;
    width: 48%;
}
.con_illust3 {
    bottom: -23%;
    right: -10%;
    width: 32%;
}
#contents .con_txt span {font-size: 12px;}
#footer_info .info_txt{padding: calc(5% + 20px);}

.page .blur {background-size: 85%;}

}


/*20230705*/
:root{
	--color5: #260f05;
}
.bg_color5{background-color: var(--color5);}

#mainimage {height: 100vh;}
/*#mainimage img {*/
/*    width: 100%!important;*/
/*    height: auto;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    -ms-transform: translate(-50%,-50%);*/
/*    -webkit-transform: translate(-50%,-50%);*/
/*    transform: translate(-50%,-50%);*/
/*}*/
#video {
    height: 100%;
    width: 60%;
    margin: 0 auto;
    padding-top: 150px;
    padding-bottom: 100px;
}
#video video {
    width: 100%!important;
    height: 100%;
    top: auto;
    left: auto;
    transform: none;
}
#video .video01 {
    bottom: 10%;
    right: -5%;
    width: 40%;
    max-width: 340px;
    transform: rotate(5deg);
}
#video .video02 {
    top: 45%;
    left: -7%;
    width: 30%;
    max-width: 300px;
    transform: rotate(-5deg);
}
#video .video03 {
    top: 25%;
    right: -12%;
    width: 27%;
    max-width: 250px;
    transform: rotate(10deg);
}
/*.catch {*/
/*    width: 40%;*/
/*    max-width: 600px;*/
/*}*/
.loopimg::before {background-image: url("../dup/img/loop_1.png");}
#contents {
    background-color: #fff;
    background-image: url(./Dup/img/con2_center.png);
    background-position: center center;
    background-size: 45%;
    background-repeat: no-repeat;
}
#top_cms_wrap, .top #footer_nav{background-color: #ff8888;}
.con_illust1_1{
    left: -20px;
    bottom: -90px;
    width: 50%;
    max-width: 200px;
}
.con_illust2_1{
    right: -20px;
    top: -80px;
    width: 50%;
    max-width: 250px;
}
.con_illust3_1{
    left: -20px;
    top: -50px;
    width: 50%;
    max-width: 300px;
}
.page .con_box{
    position: relative;
}
.page .con_box::before{
    content: "";
    background-image: url('./Dup/img/center.png');
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 100%;
    width: 100%;
    height: calc(100% - 250px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page .con_box::after{
    content: "";
    background-image: url('./Dup/img/top.png'),url('./Dup/img/bottom.png');
    background-position: top center, bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100% + 20px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.cms_wrap, #page7 .con_box .cate_box, #page8 .con_box #contact_tel, #page8 .con_box p, #page8 .con_box #tel_txt, #page9 .top_txt, #page9 .box_wrap, #page10 .left, #page10 .right{
    position: relative;
    z-index: 2;
}
#page9 .box_wrap .border_color1{border-color: #fff;}
#page9 .box_wrap .txt_color1{color: #fff;}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#mainimage {height: 70vh;}
#video {width: 80%;}
.con_illust3_1{top: -30px;}
.page .con_box::before {height: calc(100% - 50px);}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#mainimage {height: 40vh;}
#video {
    height: auto;
    width: 100vw;
    padding-top: 100px;
    padding-bottom: 50px;
}
#video video {
    width: 100%!important;
    height: auto;
    margin: 0 auto;
}
#video .video01 {
    bottom: 7%;
    right: 2%;
    width: 63%;
}
#video .video02 {
    top: 37%;
    left: 0%;
    width: 46%;
}
#video .video03 {
    top: 18%;
    right: 4%;
    width: 46%;
}
/*.catch {*/
/*    width: 45%;*/
/*    top: 50%;*/
/*}*/
.con_illust1_1 {
    left: -40px;
    bottom: auto;
    top: -40px;
    width: 42%;
}
.con_illust2_1 {
    right: -50px;
    top: auto;
    bottom: -90px;
}
.con_illust3_1 {
    top: auto;
    bottom: -95px;
}

}

/*20230719*/
#top_cms_wrap {
    background-image: url(./Dup/img/topcms_center.png);
    background-position: center center;
    background-size: 40%;
    background-repeat: no-repeat;
}
#top_cms_wrap .top_cms_box {
    position: relative;
    /*border: none;*/
}
#top_cms .cms_title .bar{display: none;}
#top_cms_wrap .top_cms_box::before, #top_cms_wrap .top_cms_box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 250px);
    height: calc(100% + 250px);
    z-index: -1;
}
#top_cms_wrap .top_cms_box::before {
    background-image: url(./Dup/img/cms_top.png), url(./Dup/img/cms_bottom.png);
    background-position: top left, bottom left;
    background-size: auto;
    background-repeat: repeat-x;
    width: calc(100% + -110px);
}
#top_cms_wrap .top_cms_box::after {
    background-image: url(./Dup/img/cms_left.png), url(./Dup/img/cms_right.png);
    background-position: top left, bottom right;
    background-size: auto;
    background-repeat: repeat-y;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#top_cms_wrap .top_cms_box::before, #top_cms_wrap .top_cms_box::after {
    width: calc(100% + 100px);
    height: calc(100% + 100px);
}
#top_cms_wrap .top_cms_box::before {
    background-size: 70% auto;
    width: calc(100% + -110px);
}
#top_cms_wrap .top_cms_box::after {background-size: 20%;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#top_cms_wrap .top_cms_box::before, #top_cms_wrap .top_cms_box::after {
    width: calc(100% + 40px);
    height: calc(100% + 50px);
}
#top_cms_wrap .top_cms_box::before {width: calc(100% + -110px);}
#top_cms_wrap {background-size: 90%;}

}

/*20230802*/
#intro_wrap{
    background-image: url(./Dup/img/intro_title_bg.png);
    background-position: top right;
    background-size: 40%;
    background-repeat: no-repeat;
}
.top_title .slash:before, .top_title .slash:after {background-color: #000;}
.top_title h2 {
    color: black;
    text-shadow: 1px 1px 0 rgba(255,255,255,1), 2px 2px 0 rgba(255,255,255,1), 3px 3px 0 rgba(255,255,255,1), 4px 4px 0 rgba(255,255,255,1), 5px 5px 0 rgba(255,255,255,1);
}
.cms_title h3 {
    font-family: 'Mochiy Pop One', sans-serif;
    font-size: 90px;
}
#top_cms_wrap .top_cms_box::before, #top_cms_wrap .top_cms_box::after{display: none;}
#top_cms_wrap, .top #footer_nav {
    background-color: #fff;
}
#top_cms_wrap {
    background-image: url(./Dup/img/con2_center.png);
    background-position: center center;
    background-size: 45%;
    background-repeat: no-repeat;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#intro_wrap{background-size: 70%;}
.cms_title h3 {font-size: 50px;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#intro_wrap{background-size: 100%;}
.cms_title h3 {font-size: 30px;}

}


