@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;600&family=Shippori+Mincho:wght@500&family=Zen+Kaku+Gothic+Antique:wght@400;700&display=swap');

/** font **/

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

/** color **/

:root{
    --color1: #F9D9E9;
    --color1s: #E585AC;
    --color2: #F5F2F0;
    --color3: #B7ECED;
    --color3s: #68C8D8;
    --color4: #E5DEDA;
    --black: #5E4323;
}

/** other **/

#fakeloader{
    background-color: #fff;
}

#wrap{
    font-size: 16px;
    letter-spacing: 1px;
}

header.scr_header{
    background-color: rgba(255,255,255,0.8)!important;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
header #logo, header.scr_header #logo{
    max-width: 200px!important;
}

header .head_banner{
    right: 50px;
}
header .head_banner a{
    background-image: linear-gradient(to right, var(--color1s), var(--color3s))!important;
    border-radius: 50px;
}

.button_container span:not(:first-of-type){
    background-color: var(--black);
}
.button_container span:nth-of-type(1){
    color: var(--black);
}
.overlay{
    background-color: transparent!important;
    background-image: linear-gradient(to right bottom, var(--color1s), var(--color3s))!important;
}
.overlay .bg_color1{
    background-color: transparent;
    border: solid 1px;
}

#pc_nav li, #top_pc_nav li, #footer_nav li {
    max-width: inherit;
}
#pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after{
    height: 1px;
    background: currentColor;
}
#pc_nav{
    padding-right: 160px;
}
#pc_nav li a{
    color: var(--black);
}

#main_img{
    background-image: url(./Dup/img/bg_img1.png);
    background-size: 1000px;
    background-repeat: no-repeat;
    background-position: top -400px left -400px;
}
#main_img:before{
    display: none;
}
#main_img #main_img_box{
    width: 80%!important;
    margin-left: auto;
}
#main_img .main_logo{
    top: 20px;
    left: 20px;
}
#main_img .catch{
    left: 8%;
    bottom: 10%;
}

.back1:before, .back2:before{
    display: none;
}
.num{
    display: none;
}
.portrait_img {
    height: 600px!important;
}

main{
    background-image: url(./Dup/img/bg_img2.png), url(./Dup/img/bg_img3.png);
    background-size: 1000px;
    background-repeat: no-repeat;
    background-position: top -200px right -300px, bottom -200px left -300px;
}
main.back1{
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)), url(./Dup/img/bg_img3.png);
    background-size: 100% 200px, 1000px;
    background-position: top, bottom -200px left -300px;
}
main.back1 .con_box{
    padding: 0;
    background-color: transparent;
}

#intro #intro_wrap{
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
#intro .check_wrap p{
    padding-left: 70px;
    background-image: url('./Dup/img/check.png');
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: top 20px left 20px;
}

.line:before{
    background-color: transparent!important;
    background-image: linear-gradient(to right, var(--color1), var(--color3));
}

.txt_more .txt_more_item{
    position: relative;
}
.txt_more.more_mode .txt_more_item{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.txt_more.more_mode.more_active .txt_more_item{
    display: block;
}
.txt_more .txt_more_btn{
    cursor: pointer;
}
.txt_more .txt_more_btn::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-right: solid 1px;
    border-bottom: solid 1px;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    transform: rotate(45deg);
}
.txt_more.more_active .txt_more_btn::before{
    top: 5px;
    transform: rotate(-135deg);
}

#contents1 .con_box{
    margin-top: 100px;
}

#contents2 #contents2_wrap{
    position: relative;
}
#contents2 #contents2_wrap::before{
    position: absolute;
    content: "";
    width: 1000px;
    height: 1000px;
    background-image: url('./Dup/img/bg_img1.png');
    background-size: contain;
    background-repeat: no-repeat;
    top: -500px;
    left: -400px;
    z-index: -1;
}
#contents2 .con_box{
    margin-top: 100px;
}

#contents3 .con_box{
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
#contents3_wrap:before{
    background-size: cover;
    background-attachment: fixed;
}
#contents3_wrap:after{
    display: none;
}

.more_btn{
    transition-delay: 0s!important;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    background-color: #fff;
    overflow: hidden;
    color: var(--black);
    z-index: 1;
}
.more_btn:before{
    opacity: 0;
    width: 100%!important;
    border: none;
    background-image: linear-gradient(to right, var(--color1), var(--color3));
    z-index: -1;
}
.more_btn:hover:before{
    opacity: 1;
}
.more_btn:after{
    display: none;
}

#top_cms{
    position: relative;
    z-index: 1;
}

#page_title:before{
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    background-color: rgba(255,255,255,0.7);
    background-size: 100% 200px;
    background-repeat: no-repeat;
    background-position: bottom;
}
#page_title .page_title_box{
    width: 100%;
    padding: 0 0 50px;
    background-image: linear-gradient(to right, var(--color1s), var(--color3s));
    background-size: 100px 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: transparent;
}
#page_title .page_title_box .txt_white{
    color: var(--black);
}
#page_title .page_title_box p{
    letter-spacing: 4px;
    margin-bottom: 10px;
    font-size: 20px;
}
#page_title .page_title_box h2{
    font-size: 40px;
}

.cate_title{
    font-family: var(--font-jp2);
	background-color: transparent;
	padding: 0;
	margin: 0;
	display: block;
	border: none;
	width: 100%!important;
	font-size: 24px;
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 50px;
	background-image: linear-gradient(to bottom, var(--color1s), var(--color1s)), linear-gradient(to bottom, var(--color3s), var(--color3s));
	background-size: 30px 1px;
	background-repeat: no-repeat;
	background-position: left calc(50% - 20px) bottom 0, right calc(50% - 20px) bottom 0;
	color: var(--black);
	font-weight: normal
}

.pager li a{
    background-color: var(--color3s)!important;
}
.pager li a:hover{
    background-color: var(--color1s)!important;
}

.cate_list li a:hover{
    background-color: var(--color1)!important;
}

#info_contact, #footer_nav{
    margin-bottom: 0;
    padding-bottom: 50px;
}

footer{
    background-color: #fff!important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

footer h2{
    display: none;
}

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

#h1txt{
    padding-bottom: 50px;
}

#copyright{
    background-color: var(--color2);
    color: var(--black);
}
#copyright a{
    color: var(--black);
}

.foot_banner{
    right: 80px;
    bottom: 20px;
    z-index: 2;
}
.foot_banner a{
    border-radius: 50px;
}


/** tablet 1000 **/
@media screen and (max-width: 1000px){
#main_img .main_logo{
    display: none;
}
header .head_banner {
    right: 110px;
}
}

/** tablet 780 **/
@media screen and (max-width: 768px){
main {
    background-size: 120vw;
    background-position: top -200px right -400px, bottom -300px left -300px;
}
main.back1{
    background-size: 100% 200px, 120vw;
    background-position: top, bottom -300px left -300px;
}
#main_img {
    background-size: 120vw;
    background-position: bottom 50px left -600px;
}
#main_img #main_img_box {
    height: 60vw!important;
}
#main_img .catch {
    left: 5%;
}
#contents1 .con_box{
    margin-top: 50px;
}
#contents2 .con_box{
    margin-top: 50px;
}
#contents3_wrap:before{
    background-attachment: scroll;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#wrap{
    font-size: 14px;
}
.line:before {
    left: 50%!important;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
header #logo, header.scr_header #logo {
    max-width: 160px!important;
}
header .head_banner {
    right: 80px;
}
main {
    background-position: top -100px right -200px, bottom -100px left -100px;
}
main.back1{
    background-position: top, bottom -100px left -100px;
}
#main_img {
    background-image: none;
}
#main_img #main_img_box {
    height: 80vw!important;
}
#main_img .catch {
    bottom: -110px;
}
#contents2 #contents2_wrap::before {
    width: 120vw;
    height: 120vw;
    top: -400px;
    left: -150px;
}
#contents3 {
    margin-bottom: calc(60vw - 50px);
}
#contents3_wrap:before{
    height: 60vw;
    top: calc(100% - 50px);
}
#page_title .page_title_box p{
    font-size: 18px;
}
#page_title .page_title_box h2{
    font-size: 30px;
}
#copyright{
    padding-bottom: 90px;
}
.foot_banner{
    right: 0;
    left: 0;
    bottom: 10px;
    margin: auto;
}
}