﻿/*add_contents------------------------------------------------------------------*/

#contents .con_title span, #contents2 .con_title span, #contents3 .con_title span{
    position: relative;
    padding-bottom: 10px;
}
#contents .con_title span::before, #contents2 .con_title span::before, #contents3 .con_title span::before{
    position: absolute;
    content: "";
    width: 0;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    border-radius: 10px;
    background-color: #fff;
    transition: 1s;
}

#contents .con_box1::before{
    display: none;
}


#contents2 .con_wrap, #contents3 .con_wrap{right: -10px}
#contents2.trans .con_wrap, #contents3.trans .con_wrap{
	opacity: 1;
	right: 0;
}

#contents2 .con_img{
	top: 100px;
	bottom: 100px;
	right: 0
}

#contents3 .con_img{
	top: 100px;
	bottom: 100px;
	left: 0
}


#contents .con_bg,#contents3 .con_bg {
    top: 0;
    right: 0;
}

#contents2 .con_bg {
    top: 0;
    left: 0;
}

/*add_contents------------------------------------------------------------------*/




/* YouTube------------------------------------------------------------------------*/
.video_cms{
	padding-bottom: 56.25%;
	height: 0;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.yt{width: 100%;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.video_cms {padding-bottom: 56.25%;}
}


/* YouTube------------------------------------------------------------------------*/


/*main_img------------------------------------------------------------------------*/
.custom_wrap::before {
    background: url(dup/img/catch.png);
    background-repeat: no-repeat;
    z-index: 3;
    position: absolute;
    top: 6%;
    left: 6%;
    width: 100%;
    height: 25%;
    background-size: contain;
    content: '';
    max-width: 650px;
}


.custom_wrap::after {
    background: url(dup/img/catch02.png);
    background-repeat: no-repeat;
    z-index: 3;
    position: absolute;
    bottom: 7%;
    right: 6%;
    width: 100%;
    height: 7%;
    background-size: contain;
    content: '';
    max-width: 650px;}

@media screen and (max-width: 1500px){
.custom_wrap::after{ bottom: 12%;}
}

/*main_img------------------------------------------------------------------------*/



/*font------------------------------------------------------------------------------*/

body { font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
html, body {font-size: 15px;}
.font_bar {
    font-family: 'Nunito','Barlow', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
/*font------------------------------------------------------------------------------*/

figure img,.more a { border-radius: 10px;}
figure,.yt .video_cms{ border-radius: 10px;}
div#page_top {border-radius: 20px 20px 0 0;}
/*top------------------------------------------------------------------------------*/
h1#logo img {max-width: 280px;}
h1#logo{margin-bottom: 80px !important;}

.intro_img1 {
    width: calc(100% - 20px) !important;
    height: calc(50% - 30px) !important;
    border-radius: 10px;}

.intro_img2{
    width: calc(50% - 20px)!important;
    margin-right: 20px;
        border-radius: 10px;}
.intro_img3{
    width: calc(50% - 20px) !important;
        border-radius: 10px;}

h2.con_title {text-align: center;}
p.con_no {text-align: center;}



.con_txt{
    font-size: 17px;
    letter-spacing: 1.8px;
    line-height: 2.3;}

#contents p.con_no {
    background: url(dup/img/sozai01.png);
    background-size: contain;
    width: 100%;
    height: 283px;
    background-repeat: no-repeat;
    max-width: 300px;
    margin: 0 auto;
    transform: translate(-13%, -15%);
    font-size: 0px;
}

#contents2 p.con_no {
    background: url(dup/img/sozai02.png);
    background-size: contain;
    width: 100%;
    height: 283px;
    background-repeat: no-repeat;
    max-width: 300px;
    margin: 0 auto;
    transform: translate(-13%, -15%);
    font-size: 0px;
}

#contents3 p.con_no {
    background: url(dup/img/sozai03.png);
    background-size: contain;
    width: 100%;
    height: 283px;
    background-repeat: no-repeat;
    max-width: 300px;
    margin: 0 auto;
    transform: translate(-13%, -15%);
    font-size: 0px;}


#contents .con_bg,#contents2 .con_bg,#contents3 .con_bg{
    border-radius: 50px;
    width: 70% !important;
    border: solid 20px #f7f7f7;}

#contents .con_img,#contents3 .con_img{ border-radius: 0px 10px 10px 0px;}
#contents2 .con_img{ border-radius: 10px 0px 0px 10px;}

span.nav_bg {border-radius: 20px;}
span.nav_bg.trans {border-radius: 0 !important;}
div#logo2 img { width: 250px;}


/*cms-----------------------------------------------------------------------------*/
/*丸み・やさしさ*/

.cms_2-b .cate_title {
    border-color: #ffbe08 !important;
    background-color: #ffbe08 !important;
    color: #ffffff;
    border-radius: 10px;}
    
.cms_2-b .cate_box {
    border:solid 2px #ffbe08;
    border-radius: 10px;}

.cms_2-b .box_title1{border-bottom:solid 2px;}


section#cms_2-b .cate_title {
    border-color: #ffbe08 !important;
    background-color: #ffbe08 !important;
    color: #ffffff;
    border-radius: 10px;}
    
section#cms_2-b .cate_box {
    border:solid 2px #ffbe08;
    border-radius: 10px;}

section#cms_2-b .box_title1{border-bottom:solid 2px;}

section#cms_6-a .cate_title {
    border-color: #ffbe08 !important;
    background-color: #ffbe08 !important;
    color: #ffffff;
    border-radius: 10px;}

section#cms_6-a .box_wrap{border-radius:10px;}
section#cms_6-a .box_txt1{color: #02c4b5;}


/*linkStyle*/
a.linkStyle {
    color: #02c4b5;
    border-bottom:solid 1px;
    transition: 0.5s;}
a.linkStyle:hover { color: #02c4b5;}

.pager li a { border-radius: 10px;}

#cms_2-a h3.cate_title {
    padding: 0px 0px;
    border-top: solid 0px;
    border-bottom: solid 3px #ffbe08;
    font-size: 28px;
    font-weight: bold;}

/*下層-----------------------------------------------------------------------------*/
div#form_box input, div#form_box textarea {border: solid 1px #aaa;}
.tel_wrap {border-radius: 10px;}

.privacy_box a {border-radius: 3px;}

#page_title .title_bg {background-position: bottom center !important;}


/*IE*/
@media all and (-ms-high-contrast: none){
    
.pager li a { padding-top: 3px !important;}
.cate_list a {padding-top: 0px !important;}
#cms_2-b .cate .cate_title {padding-top: 7px !important;}
#cms_6-a .cate .cate_title { padding-top: 7px !important;}
#page07 .info_title::before {top: 14px !important;}
#page09 a {
    padding-top: 1px !important;
    padding-bottom: 2px !important;}
 
    
}
/*タブレット*/
@media screen and (max-width: 768px){
    span.nav_bg {border-radius: 0px 0px 0px 10px;}
    div#page_top {border-radius: 10px 0px 0 0;}
    div#logo2 img {width: 230px;}
    #cms_1-a .pager li {margin-right: 5px !important;}
    
.custom_wrap::before {
    background: url(dup/img/catch.png);
    background-repeat: no-repeat;
    z-index: 3;
    position: absolute;
    top: 4.5%;
    left: 6%;
    width: 100%;
    height: 25%;
    background-size: contain;
    content: '';
    max-width: 650px;}


.custom_wrap::after {
    background: url(dup/img/catch02.png);
    background-repeat: no-repeat;
    z-index: 3;
    position: absolute;
    bottom: auto;
    top: 23.5%;
    right: auto;
    left: 7%;
    width: 100%;
    height: 7%;
    background-size: contain;
    content: '';
    max-width: 450px;}
    
#contents .con_bg, #contents2 .con_bg, #contents3 .con_bg{
    border-radius: 0;
    width: 100%!important;
    border:0px;
}
#contents .con_img, #contents2 .con_img, #contents3 .con_img{
    border-radius: 0;
}
#contents2 .con_wrap, #contents3 .con_wrap{right: 0;opacity: 1}
#contents2 .con_img, #contents3 .con_img{
	height: 60vw;
	top: auto;
	bottom: auto
}

.con_txt {
    font-size: 16px;
    letter-spacing: 1.8px;
    line-height: 2.3;}
    

#contents p.con_no {
    background: url(dup/img/sozai01.png);
    background-size: contain;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    max-width: 250px;
    margin: 0 auto;
    transform: translate(-13%, -8%);
    font-size: 0px;
}

#contents2 p.con_no {
    background: url(dup/img/sozai02.png);
    background-size: contain;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    max-width: 250px;
    margin: 0 auto;
    transform: translate(-13%, -8%);
    font-size: 0px;
}

#contents3 p.con_no {
    background: url(dup/img/sozai03.png);
    background-size: contain;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    max-width: 250px;
    margin: 0 auto;
    transform: translate(-13%, -8%);
    font-size: 0px;}
    
.intro_img1 {
    width: calc(100% - 30px) !important;
    height: calc(50% - 30px) !important;
    border-radius: 10px;}
    
.intro_img2 {
    width: calc(50% - 30px)!important;
    margin-right: 15px;
    margin-bottom: 5px;
    border-radius: 10px;}
.intro_img3{margin-bottom: 5px;}
}
/*スマホ*/
@media screen and (max-width: 667px){

.custom_wrap::before {
    background: url(dup/img/catch.png);
    background-repeat: no-repeat;
    z-index: 3;
    position: absolute;
    top: 9%;
    left: 6%;
    width: 100%;
    height: 25%;
    background-size: contain;
    content: '';
    max-width: 300px;}

.custom_wrap::after {
    background: url(dup/img/catch02_sp.png);
    background-repeat: no-repeat;
    z-index: 3;
    position: absolute;
    bottom: auto;
    top: 23.5%;
    right: auto;
    left: 7%;
    width: 100%;
    height: 7%;
    background-size: contain;
    content: '';
    max-width: 300px;}
    
section#intro {background: #f7f7f7;}

.font_10up {
    font-size: -webkit-calc(1rem + 9px);
    font-size: calc(1rem + 9px);}
.con_title{    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);}

.con_txt {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 2;}
    
.cms_2-b .cate_box {margin-bottom: 25px;}


#contents p.con_no {
    background: url(dup/img/sozai01.png);
    background-size: contain;
    width: 100%;
    height: 191px;
    background-repeat: no-repeat;
    max-width: 200px;
    margin: 0 auto;
    transform: translate(-11%, -15%);
    font-size: 0px;
}

#contents2 p.con_no {
    background: url(dup/img/sozai02.png);
    background-size: contain;
    width: 100%;
    height: 191px;
    background-repeat: no-repeat;
    max-width: 200px;
    margin: 0 auto;
    transform: translate(-11%, -15%);
    font-size: 0px;
}


#contents3 p.con_no {
    background: url(dup/img/sozai03.png);
    background-size: contain;
    width: 100%;
    height: 191px;
    background-repeat: no-repeat;
    max-width: 200px;
    margin: 0 auto;
    transform: translate(-11%, -15%);
    font-size: 0px;
}

div#logo2 img {width: 100%;}

#cms_2-a h3.cate_title { font-size: 23px;}

.font_2dw_tb {
    font-size: -webkit-calc(1rem - 1px);
    font-size: calc(1rem - 1px);
}
.font_100per_sp {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}
}
