﻿@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
body{
    font-family: 'Zen Maru Gothic',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*
#loading{
    display:none;
}
*/


/*--all page---------------------------
-------------------------------------*/

:root{
    --color1:#f6f5ee;
    --color2:#35c6e0;
}

.linkStyle{
    color:var(--color2);
    transition:all 0.3s;
    text-decoration:underline;
}
.linkStyle:hover{
    opacity:0.7;
}

body{
    overflow:hidden;
}
.all_page .menu .logo{
    width:15%!important;
}
.all_page .menu.is-fixed .logo{
    width:7%!important;
}
.menu .nav ul li{
    border-left:0;
}

.bottom_menu{
    font-size:15px;
}
footer{
    background-color: #4c453a!important;
}

.fix_bnr{
    left:20px;
    z-index:99;
}
#page-top a div i{
    left: 43%;
}


/*--top page---------------------------
-------------------------------------*/
.top_nav{
    display:none;
}

.catch{
    width: 45vw;
    max-width: 850px;
    z-index:3;
}
.catch img{
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3));
}
.main_imglogo{
    width:200px;
    top:20px;
    right:20px;
    z-index:3;
}
#video::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.2);
    top:0;
    left:0;
    z-index:1;
    pointer-events:none;
}
.intro_img1 p{
    width: 25vw;
    max-width: 500px;
    left: 1%;
}
.intro_img2 p{
    width: 25vw;
    max-width: 500px;
    right: 1%;
}

.entry_bnr{
    border-radius:50px;
}
#contents{
    background-image:url(./Dup/img/item1.png),url(./Dup/img/item2.png);
    background-repeat:no-repeat,no-repeat;
    background-size:250px,250px;
    background-position:top left,top right;
    background-color:var(--color1);
}
#contents .box:last-of-type figure:after{
    border: 250px solid;
}
#contents .txt_wrap{
    position:relative;
    z-index:2;
}

#top_cms .cms_title .letter_3{
    padding-bottom:20px;
    background:url(./Dup/img/intro_item.png) no-repeat center bottom/100% 20px;
}

/*--under page---------------------------
-------------------------------------*/

.page5 #cms_6-a .box_wrap{
    position:relative;
}
.page5 #cms_6-a .box_wrap::before {
    content: "";
    position: absolute;
    top: 40%;
    left: -28px;
    width: 30px;
    height: 30px;
    background: url(./Dup/img/fukidashi.png) no-repeat;
    background-size: contain;
}


/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){

}


@media screen and (max-width: 1366px){
.intro_img1 p,.intro_img2 p {
    width: 20vw;
}

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px){
.button_container span{
    box-shadow: 2px 2px #fff;
}
.main_img_wrap .catch{
    bottom:25px!important;
}
#video::before{
    background-color: rgba(0,0,0,0.1);
}
#cotnents .box:first-of-type .grid_6_tb{
    width: 50% !important;
}
#contents .box:first-of-type .txt_wrap1{
    width:100%!important;
}
#contents .flex_order2_tb {
    order: 2;
}
.intro_img1,.intro_img2{
    height:250px;
}
.intro_img1 p{
    width: 40vw;
    left:-1%;
}
.intro_img2 p {
    width: 40vw;
    right:-1%;
}
#contents .box .txt_wrap{
    padding-left: 0;
}
#page_title .wrap p{
    text-shadow:2px 2px 0 #fff;
}

}

@media screen and (max-width: 768px){
#contents{
    background-size: 150px,150px;
}
.intro_illust{
    width:250px;
}
.page5 #cms_6-a .box_wrap::before{
    background:url(./Dup/img/fukidashi_tb.png) no-repeat;
    top: -26px;
    left: 50%;
    transform:translateX(-50%);
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.main_wrap {
    margin-top: 35.5vh;
}
#contents {
    background-size: 80px,80px;
}
.intro_illust {
    width: 180px;
    margin-top: 20px;
}
.intro_img1 p {
    width: 50vw;
    left: -5%;
}
.intro_img2 p {
    width: 50vw;
    right: -8%;
}
#contents .box:last-of-type figure:after {
    border: 200px solid;
}
#page_title .wrap p{
    text-shadow:none;
}
}




