/** font **/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@500&family=Plus+Jakarta+Sans&family=Zen+Old+Mincho&display=swap');


:root{
    --font-jp: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-jp2: 'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    --font-en: 'Plus Jakarta Sans', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en2: 'Cormorant Infant', 'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body, .font_sans-serif, .hannari, .pop400, .pop300, .didot{
    font-family: var(--font-jp);
}
.font_jp2{
    font-family: var(--font-jp2);
}
.font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}
.font_en2{
    font-family: var(--font-en2);
}
.font_bold{
    font-weight: normal;
}

/** color **/

:root{
    --color1: #232326;
    --color2: #f5f5f7;
    --color3: #6d4f99;
    --color4: #dfe0e8;
}

/** other **/

.back1:before, .back2:before{
    display: none;
}

body, html{
    font-size: 14px;
}
#wrap{
    letter-spacing: 1px;
}

h2, h3, h4, h5, h6{
    line-height: 1.5;
}

.linkStyle{
    font-family: var(--font-en);
}

.line:before{
    display: none;
}

.overlay{
    background-image: none!important;
    background-color: rgba(35,35,38,0.9)!important;
    backdrop-filter: blur(5px);
    font-family: var(--font-en);
}
#overlay .left{
    letter-spacing: 3px;
}

#header > div.d_flex{
    padding: 20px 0;
}
header.scr_header{
    background-color: rgba(35,35,38,0.9)!important;
    backdrop-filter: blur(5px);
}
.button_container span:nth-of-type(1){
    font-family: var(--font-en);
}

#pc_nav{
    font-family: var(--font-en);
    letter-spacing: 3px;
}
#pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after{
    height: 1px;
    background-color: currentColor!important;
}
#pc_nav li{
    max-width: inherit;
}
#pc_nav li:last-of-type a::after{
    display: none;
}

#logo{
    max-width: 150px!important;
}

#top_pc_nav{
    display: none;
}

#main_img .menu p a{
    width: 60%;
}

#intro{
    padding-top: 100px;
    padding-bottom: 200px;
    margin-bottom: 0;
    background-image: url('./Dup/img/bg_img.jpg');
}
#intro_wrap{
    padding: 0;
    background-color: transparent;
}
#intro h3, #intro .sub_title{
    font-family: var(--font-jp2);
}

.top_con{
    height: 100vh;
}
.top_con .con_bg{
    z-index: -1;
}
.top_con .con_wrap{
    background-image: linear-gradient(to bottom, rgba(35,35,38,0), rgba(35,35,38,0.8));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 80%;
    box-sizing: border-box;
}
.top_con .con_title .line_b{
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 1s cubic-bezier(.1,.46,.24,1) 0.5s;
    line-height: 2;
}
.top_con .con_title.scrollin .line_b{
    background-size: 100% 1px;
}

#con1{
    margin-top: -100px;
    position: relative;
    z-index: 1;
}

#top_conveyer .swiper-wrapper{
	transition-timing-function:linear;
}

#top_cms.back1:before{
    display: none;
}
#top_cms{
    max-width: 1280px;
    padding: 100px 100px 1px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}
#top_cms .top_cms_box{
    padding: 0!important;
    margin-bottom: 100px;
}
#top_cms .cms_title{
    text-align: center;
    margin-bottom: 100px;
}
#top_cms .cms_title .line-l:before{
    display: none;
}
#top_cms .cms_title p{
    display: inline-block;
    border-bottom: solid 1px;
    margin-bottom: 10px;
    font-family: var(--font-jp2);
}
#top_cms .cms_title h3{
    font-size: 50px;
    letter-spacing: 3px;
    font-family: var(--font-en2);
}

.more_btn{
    font-family: var(--font-en);
    letter-spacing: 5px;
    background-color: var(--color2);
}

.date{
    font-family: var(--font-en);
}

#info_contact .con_box .con_title .hannari{
    font-family: var(--font-en2);
}

section[id^="page"] > div{
    max-width: 1280px;
    padding: 100px;
    margin-left: auto;
    margin-right: auto;
}
section[id^="page"] > div > div{
    padding: 0;
}

#page_title{
    border-bottom: solid 10px;
}
#page_title:before{
    background-color: rgba(70,70,70,0.5)!important;
}
#page_title .page_title_box{
    background-color: transparent;
    width: 100%;
    padding: 80px 0 50px;
    background: linear-gradient(to bottom, #fff, #fff);
    background-size: 100px 3px;
    background-position: center bottom;
    background-repeat: no-repeat;
}
#page_title p{
    letter-spacing: 5px;
    margin-bottom: 10px;
    font-family: var(--font-jp2);
    opacity: 1;
}
#page_title h2{
    font-size: 50px;
    letter-spacing: 5px;
    font-family: var(--font-en2);
}

.cate_title{
    font-family: var(--font-jp2);
}

.box_title1, .box_title2, .box_title, .sub_cate_title{
    font-family: var(--font-jp2);
}

.pager{
    font-family: var(--font-en);
}

#cms_2-a{
    counter-reset: number 0;
}
#cms_2-a .cate_box .box_title1::before{
    counter-increment: number 1;
    content: "0" counter(number) "　-";
    display: block;
    margin-bottom: 20px;
    color: var(--color3);
    font-family: var(--font-en);
    font-size: 16px;
}
#cms_2-a .cate_box:nth-of-type(even){
    flex-direction: row-reverse;
}

#cms_6-c{
    counter-reset: number2 0;
}
#cms_6-c .cate_box{
    border-top-color: var(--color3);
}
#cms_6-c .cate_box::before{
    position: absolute;
    counter-increment: number2 1;
    content: "0" counter(number2);
    color: var(--color3);
    font-size: 50px;
    font-family: var(--font-en2);
    padding-right: 20px;
    padding-bottom: 10px;
    line-height: 1;
    left: -10px;
    top: -25px;
    background-color: #fff;
}

#page10 .more_btn{
    letter-spacing: 3px;
}

.footer_banner a .banner_bg{
    transition-property: opacity, transform;
}
.footer_banner a:hover .banner_bg{
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.1)
}
#footer_nav{
    padding: 20px 0;
    margin-bottom: 0;
}
#footer_nav_wrap{
    font-family: var(--font-en);
    letter-spacing: 3px;
}
#footer{
    background-color: var(--color2)!important;
}
#footer_con h2{
    display: none;
}

#logo2 a{
    max-width: 150px;
}

#copyright{
    font-family: var(--font-en);
}

#return_top{
    font-family: var(--font-en);
}

/** tablet 1280**/
@media screen and (max-width: 768px){
.head_banner{
    display: block;
    right: 10px;
    bottom: 10px;
    z-index: 10;
}
#return_top{
    transform: translateY(-20px);
}
}


/** tablet 780 **/
@media screen and (max-width: 768px){
.nav_menu_more a .icon:before{
    display: none;
}
#wrap.top header #logo {
    opacity: 0;
    transition: opacity 0.3s;
}
#wrap.top header.scr_header #logo{
    opacity: 1;
}
#main_img{
    height: 100vw;
}
.top_con{
    height: inherit;
}
.top_con .con_wrap{
    background-image: none;
    background-color: rgba(35,35,38,0.4);
}
#top_cms{
    padding: 100px 50px 1px;
}
#top_cms .cms_title h3{
    font-size: 40px;
}
section[id^="page"] > div{
    padding: 100px 50px;
}
#page_title h2 {
    font-size: 40px;
    letter-spacing: 4px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#header > div.d_flex{
    padding: 15px 0;
}
#logo {
    max-width: 100px!important;
    padding: 5px 0;
}
.head_banner{
    bottom: 0;
    right: 0;
}
#top_cms{
    padding: 100px 20px 1px;
}
section[id^="page"] > div{
    padding: 100px 20px;
}
#page_title{
    border-bottom: solid 5px;
}
#page_title .page_title_box {
    padding: 50px 0 30px;
}
#page_title h2 {
    letter-spacing: 3px;
    font-size: 34px;
}
#logo2 a{
    max-width: 100px;
}
#copyright{
    padding-bottom: 50px;
}
}