﻿/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
header #header #header_menu li a span, .pc_txt, .top_cms_box .cms_title h2, #info_title_box .info_title, #page_title #filter_white h2, #page_title #filter_white p, h2, h3, h4{
    font-family: "Zen Maru Gothic", 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: var(--color1);text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
#google_privacy a{color: var(--color1);}
:root{
	--color1: #90cfa7;
	--color2: #fbfbfb;
	--color3: #f7b7bd;
	--color4: #fce9d2;
	--color5: #fff8f0;
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}


/* header */
#logo {padding-top: 0;}

/* footer */



/* top ----------------------------------------------------------------*/

/* main img */
#main_img {
    padding-top: 0;
}
.main_img_wrap{
    background-image: url('/Files/img/main_bg.png');
    height: 100vh!important;
}
#main_img .main_img_wrap:before{display: none;}
.main_img_wrap .main_01 {
    top: 50%;
    left: 63%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 1060px;
}
.main_img_wrap .main_02{
    bottom: 2%;
    left: 27%;
    width: 18%;
    max-width: 330px;
}
.main_img_wrap .sub_catch{
    bottom: 1%;
    right: 0;
    width: 26%;
    max-width: 470px;
}
.main_img_wrap .catch{
    top: 13%;
    left: 4%;
    width: 33%;
    max-width: 600px;
}
/* .ani_fadein{display: none;} */
.ani {
  animation: slideIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
opacity: 0;
  animation-delay: 3.5s;
}
@keyframes slideIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
}
}
.ani:nth-of-type(1) {
  animation-delay: 2.0s;
}
.ani:nth-of-type(2) {
  animation-delay: 2.2s;
}
.ani:nth-of-type(3) {
  animation-delay: 2.4s;
}
.ani:nth-of-type(4) {
  animation-delay: 2.6s;
}

/* main */
.svg_wrap{
    position: absolute;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.svg_wrap::before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 169% 181px;
    background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23fff8f0"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23fff8f0"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23fff8f0"/></svg>'); 
}

@media (min-width:2100px){
.svg_wrap::before{
    background-size: 169% calc(2vw + 181px);
}
}
 
 

/* intro */


/* contents */
#contents .con_box .con_item1, #contents .con_box .con_item2 {
    width: 180px;
    height: 180px;
    bottom: -120px;
    pointer-events: none;
}

/* topcms */
.v_type3 .cate_box{border: 1px solid #c9baa9;}
.v_type3 .box_title1{color: #a67c52;}


/* under page ----------------------------------------------------------------*/
.svg_wrap .svg_box{display: none;}
#page_title #filter_white h2, #page_title #filter_white p{
    position: relative;
    z-index: 2;
}
.g-recaptcha > div {
    margin: 0 auto;
    margin-bottom: 30px;
}
#cms_2-f .cate_img1 {
    max-height: 590px;
}

/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#logo {margin-bottom: 5px;}
#logo .logo {width: 150px;}
.svg_wrap {
    height: 150px;
    bottom: -1%;
}
.svg_wrap::before {
    background-size: 169% 100px;
    background-position: 50% 100%;
}
.main_img_wrap{
    background-image: url('/Files/img/main_bg_sp.png');
}
.main_img_wrap .main_01 {
    top: 57%;
    left: 61%;
    width: 84%;
}
.main_img_wrap .main_02 {
    bottom: 10%;
    left: -1%;
    width: 34%;
}
.main_img_wrap .sub_catch {
    bottom: 1%;
    width: 45%;
}
.main_img_wrap .catch {
    top: 11%;
    left: 2%;
    width: 45%;
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#logo .logo {width: 140px;}
.main_img_wrap .main_01 {
    top: 60%;
    left: 64%;
    width: 93%;
}
.main_img_wrap .main_02 {
    bottom: 13%;
    left: -1%;
    width: 44%;
}
.main_img_wrap .sub_catch {
    bottom: 1%;
    width: 54%;
}
.main_img_wrap .catch {
    top: 9%;
    left: 4%;
    width: 64%;
}
#page_title #filter_white {padding-bottom: 80px;}
.svg_wrap {
    height: 50px;
    bottom: 50px;
}
.svg_wrap::before {background-size: 169% 50px;}
#info .info_txt h3{
    letter-spacing: 1.5px;
}
#logo2.logo {
    width: 200px;
}
#page_title h2 span {
    font-size: 25px;
    letter-spacing: -0.5px;
}

}





