/* CSS Document */


/**********
> header
> footer
> common
> toppage
    > copy
    > news
    > banner
> philosophy
    > phi01-text
    > philosophy_02
    > philosophy_03
> concept
    > concept_01
    > concept_02
    > concept_03
> product
> faq
> about
> contact
    > contact_01
    > contact_02
> note
> privacy
> sitemap
**********/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}
*{
    box-sizing: border-box;
}
html {
    font-size: 62.5%; /* 62.5%を指定すると「1.0 rem = 10px」 */
}
body {
    color:#262828;
	font-size: 18px;
    font-size: 1.8rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    letter-spacing: 2px;
    background-color:#fff;
	margin:0;
    box-sizing: border-box;
}
a, a:active, a:visited{
    color:#262828;
	text-decoration:none;
    transition: all .25s;
}
a:hover,a:active{
	opacity:0.5;
}
img{
	border:none;
    width: 100%;
}
ul li{
	list-style:none;
}
.nowrap {
    white-space: nowrap;
	display: inline-block;
}
.clearfix:after {
    content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
.renner{
    font-family: "Renner*", a-otf-gothic-bbb-pr6n, sans-serif;
}
.tsukushi{
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-style: normal;
    font-weight: 700;
}
.logo-text a img, .footer-nav{
    z-index: 2000;
}
.min-768{
    display: none;
}
.text-max-1023{
    display: inline-block;
}
.only-1024{
    display: none;
}
.min-1024{
    display: none;
}
.pc_only{
    display: none;
}
.max-1024{
    display: block;
}
.max-767{
    display: block;
}

@media screen and (min-width: 768px){
    body{
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 1.8;
    }
    .max-767{
        display: none;
    }
    .min-768{
        display: block;
    }
    
}
@media screen and (min-width: 1024px){
    .text-max-1023{
        display: none;
    }
    .min-1024{
        display: block;
    }
    .only-1024{
        display: block;
    }
    .sp_only{
        display: none;
    }
    
    
}
@media screen and (min-width: 1025px){
    .pc_only{
        display: block;
    }
    .max-1024{
        display: none;
    }
    .only-1024{
        display: none;
    }
}







/**********
header  
**********/
header{
    background: #fff;
    position: fixed;
    z-index: 1000;
    top:0;
    width: 100%;
    padding: 20px 15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .logoarea{
    position: relative;
    width: 110px;
    height: 30px;
}
header .logoarea a{
    display: block;
    width: 100%;
    height: 100%;
}
h1{
    position: absolute;
    z-index: -1;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#sp_header_btn{
    width: 26px;
    height: 27.8px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    z-index: 2000;
}
#sp_header_btn span.sp_bar{
    background: #000;
    width: 100%;
    height: 2px;
    display: block;
    transition: all .5s;
}


.global-nav{
    opacity: 0;
    transition: all .5s;
    transform: translateX(100%);
    position: fixed;
    width: 100%;
    max-width: 300px;
    height: 100vh;
    top: 0;
    right: 0;
}
.global-nav ul{
    line-height: 2;
    padding: 60px 0 0;
}
.global-nav ul li a{
    display: block;
    color: #fff;
    border-bottom: 1px solid;
    padding: 10px 20px;
}
.global-nav ul li:first-child a{
    border-top: 1px solid;
}

/****  sp menu ****/
body.fixed{
    overflow: hidden;
}
#sp_header_btn.active span.sp_bar{
    background: #fff;
}
#sp_header_btn.active span:nth-of-type(1){
    transform: rotate(-45deg); 
    transform-origin: right;
}
#sp_header_btn.active span:nth-of-type(2){
    transform: translatex(200%);
}
#sp_header_btn.active span:nth-of-type(3){
    transform: rotate(45deg); 
    transform-origin: right;
}
.global-nav.active{
    opacity: 1;
    transform: translateX(0);
    background: #00b3bd;
    color: #fff;
    overflow-y: auto;
}
.global-nav ul li a.menu-pc{
    display: none;
}


@media screen and (min-width: 768px){
    header .logoarea{
        width: 260px;
        height: 71px;
    }
    .global-nav{
        max-width: 400px;
    }
    .global-nav ul li a{
        padding: 10px 40px;
    }
    
}
@media screen and (min-width: 1025px){
    header .logoarea a{
        cursor: pointer;
    }
}
@media screen and (min-width: 1240px){
    .global-nav ul li a.menu-pc{
        display: block;
    }
    .global-nav ul li a.menu-sp{
        display: none;
    }
    header{
        background: #bae3f9;
    }
    .global-nav{
        opacity: 1;
        transition: initial;
        transform: translateX(0);
        position: relative;
        height: 100%;
        max-width: initial;
        top: initial;
        right: initial;
        width: 960px;
    }
    .global-nav.active{
        background: none;
    }
    .global-nav ul{
        line-height: initial;
        padding: 0;
        display: flex;
        font-size: 1.6rem;
        text-align: center;
    }
    .global-nav ul li{
        width: fit-content;
    }
    .global-nav ul li a{
        padding: 10px;
        color: initial;
    }
    .global-nav ul li a, .global-nav ul li:first-child a{
        border:none;
    }
    #sp_header_btn{
        display: none;
    }
    
    
}
@media screen and (min-width: 1500px){
    .global-nav{
        width: 1200px;
    }
    .global-nav ul li a{
        padding: 10px 20px;
    }
}


/**********
footer
**********/
footer{
    background: #bae3f9;
    text-align: center;
}
footer .container{
    padding: 40px 20px 10px;
}
footer .name span{
    font-size: .7em;
    margin-right: 10px;
}
footer .add_tel{
    margin: 40px auto;
}
footer .add_tel .add{
    font-size: 1.6rem;
}
footer .add_tel .tel{
    font-size: 3rem;
    font-weight: bold;
}
footer .add_tel .tel:before{
    content: "";
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-right: 5px;
    background: url(/img/phone.png) no-repeat center / cover;
    vertical-align: baseline;
}
.footer02 ul{
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    width: 90%;
    margin: 0 auto 20px;
}
footer small{
    font-size: .55em;
    line-height: 1;
    display: block;
}


@media screen and (min-width: 1024px){
    footer{
        font-size: 2rem;
        text-align: left;
    }
    footer .container{
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
    }
    .footer01{
        border-bottom: 1px solid;
        display: flex;
        justify-content: center;
        align-content: baseline;
        margin-bottom: 40px;
    }
    footer .name{
        width: 40%;
        align-items: center;
        display: flex;
    }
    footer .add_tel{
        width: 60%;
        margin:  auto;
    }
    footer .add_tel dl{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer .add_tel dl .add{
        font-size: .6em;
        text-align: right;
        width: calc(100% - 260px);
    }
    footer .add_tel dl .tel{
        width: 260px;
        text-align: center;
    }
    footer .add_tel .tel:before{
        width: 22px;
        height: 22px;
        margin-right: 0;
    }
    .footer02{
        display: flex;
        justify-content: space-between;
    }
    .footer02 ul{
        width: 30%;
        margin: 0;
    }
    
}


/**********
common
**********/
#fixed-ttl{
    width: 100%;
    height: 300px;
    margin-top: 60px;
    position: fixed;
    z-index: -1;
    top: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#content-background{
    background: #fff;
    margin-top: 360px;
}
@media screen and (min-width: 768px){
    #fixed-ttl{
        margin-top: 101px;
        height: 500px;
    }
    #content-background{
        margin-top: 601px;
    }
    
    
}
@media screen and (min-width: 1025px){
    
    
    
}


/**********
toppage
**********/
main.toppage{
    background: #fff;
    padding-bottom: 100px;
}
main .container{
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}
main.toppage #fixed-ttl{
    width: 100vw;
    height: calc(100vw * 0.9545);
}
main.toppage #content-background{
    margin-top: calc(60px + calc(100vw * 0.9545));
}
#slider{
    position: relative;
}
main.toppage .swiper-slide{
    background: #fff;
}
.toppage .swiper-slide-active img, .toppage .swiper-slide-prev img{
    transition: all 5s;
    transform: scale(1.01);
    transform-origin: center;
}
#slider .swiper-pagination{
    text-align: right;
    top: 0;
    right: 20px;
    bottom: initial;
    left: initial;
}
#slider .swiper-pagination-bullet{
    background: rgba(255,255,255,0.6);
    opacity: 1;
}
#slider .swiper-pagination-bullet-active{
    background: rgba(255,255,255,1);
}



@media screen and (min-width: 768px){
    main.toppage #content-background{
        margin-top: calc(101px + calc(100vw * 0.9545));
    }
    
    
}
@media screen and (min-width: 1024px){
    main.toppage #fixed-ttl{
        height: calc(100vh - 101px) ;
    }
    main.toppage #content-background{
        margin-top: calc(100vh - 101px) ;
    }
    .swiper-slide{
        height: calc(100vh - 101px) !important;
    }
    .swiper-bg02{
        background: url(/img/slider-02pc.jpg) no-repeat center / cover!important;
    }
    .swiper-bg03{
        background: url(/img/slider-03pc.jpg) no-repeat center / cover!important;
    }
    .swiper-bg04{
        background: url(/img/slider-04pc.jpg) no-repeat center / cover!important;
    }
    .swiper-bg05{
        background: url(/img/slider-05pc.jpg) no-repeat center / cover!important;
    }
    .swiper-bg img{
        width: 90%;
        max-width: 1000px;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    
}
@media screen and (min-width: 1025px){
    main .container{
        padding: 0;
    }
    main.toppage #content-background{
        margin-top: 100vh;
        position: relative;
    }
    main.toppage #content-background:before{
        content: "";
        background: #fff;
        width: 120px;
        height: 80px;
        border-radius: 50%;
        position: absolute;
        top: -40px;;
        right: 0;
        z-index: 2;
    }
    main.toppage #content-background:after{
        content: "scroll ↓";
        font-size: 14px;
        color: #00b3bd;
        position: absolute;
        top: -28px;
        right: 22px;
        z-index: 2;
    }
    
}



/****  copy  ****/
.top_copy{
    padding-top: 40px;
}
.top01_1{
    text-align: center;
    font-weight: bold;
    margin: 30px auto;
    position: relative;
    padding-bottom: 20px;
}
.top01_1 .quote{
    position: absolute;
    font-weight: 300;
    font-size: .6em;
    right: 0;
    bottom: 0;
}
.top01_2{
    margin: 30px auto;
    text-align: center;
}
.top01_2 h2{
    font-size: 1.25em;
    letter-spacing: .25px;
    margin-bottom: 20px;
}
.top01_2 ul li{
    margin-bottom: 20px;
}
a.blue-btn{
    background: #00b3bd;
    border-radius: 25px;
    display: block;
    position: relative;
}
a.blue-btn:before{
    content: "";
    display: block;
    width: 104%;
    height: 104%;
    border-radius: 25px;
    background: #00b3bd;
    filter: blur(3px);
    position: absolute;
    margin: auto;
    top:-2%;
    right: -2%;
    z-index: 1;
}
a.blue-btn span{
    display: block;
    background: #00b3bd;
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px;
    font-size: 2.2rem;
    text-align: left;
    position: relative;
    z-index: 2;
}
a.blue-btn span:after{
    content: "";
    width: 26px;
    height: 26px;
    background: url(/img/arrow.png) no-repeat center/ cover;
    display: inline-block;
    vertical-align: middle;
    position:absolute;
    right: 30px;
    top: calc(50% - 13px);
    z-index: 2;
}
.top_concept{
    background: #00b3bd;
    padding: 30px 20px;
    color: #fff;
    line-height: 1.6;
}
.top_concept p:first-child{
    margin-bottom: 1em;
    text-align: center;
}
.top_concept a, .top_concept a:visited, .top_concept a:active{
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    display: inline-block;
}

@media screen and (min-width: 768px){
    .top01{
        display: flex;
        align-content: center;
        justify-content: center;
        margin-top: 40px;
    }
    .top01_1{
        width: 60%;
    }
    .top01-img.sp_only{
        width: 40%;
        position: relative;
    }
    .top01-img.sp_only img{
        width: 340px;
        position: absolute;
        top: 20px;
        right: 0;
    }
    .top01_2{
        margin: 40px auto;
    }
    .top01_2 ul{
        display: flex;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .top01_2 ul li{
        width: 300px;
    }
    a.blue-btn span:after{
        right: 20px;
    }




}
@media screen and (min-width: 1024px){
    .top_copy{
        display: flex;
        margin: 40px auto;
    }
    .top_pc{
        width: 60%;
    }
    .top01_1{
        width: 100%;
        margin-bottom: 0;
        font-size: 2.2rem;
    }
    .top01_2{
        margin: 20px auto;
    }
    .top01_2 h2{
        font-size: 3rem;
    }
    .top01_2 ul{
        width: 95%;
        max-width: 560px;
    }
    .top01_2 ul li{
        width: 260px;
    }
    a.blue-btn span{
        padding: 10px 20px;
        font-size: 2rem;
    }
    a.blue-btn span:after{
        right: 10px;
    }
    .top02{
        width: 40%;
    }
    .top_concept{
        font-size: 2rem;
        width: 95%;
        padding: 30px 20px;
        margin: 0 auto;
        max-width: 1120px;
    }
    .top_concept p:first-child{
        font-size: 2.4rem;
    }
    
}



/****  news  ****/
.news{
    margin: 60px auto;
}
.news_outline{
    background: #e6e6e6;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 30px 20px;
}
.news_copy{
    line-height: 1.2;
}
.news_copy h2{
    font-size: 2.6rem;
    font-weight: 300;
}
.news_copy span{
    font-size: .8em;
    letter-spacing: 5px;
}
#news_rss .news-contents{
    padding: 20px 0;
    text-align: left;
    position: relative;
}
#news_rss .ttl{
    line-height: 1.3;
}
#news_rss .ttl .date{
    display: block;
    font-size: .8em;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 2;
}
#news_rss a.btn{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.news_content .link a.btn{
    display: block;
    background: #999;
    width: 200px;
    margin: 40px auto 0;
    padding: 5px 0;
    color: #fff;
    position: relative;
}
.news_content .link a.btn:after{
    content: ">";
    color: #fff;
    position: absolute;
    right: 20px;
}

@media screen and (min-width: 1024px){
    #news_rss .news-contents{
        display: flex;
        border-bottom: 1px solid #fff;
    }
    #news_rss .news-contents:first-child{
        border-top: 1px solid #fff;
        margin-top: 40px;
    }
    #news_rss .news-contents img{
        width: 200px;
        height: auto;
        margin-right: 40px;
    }
    #news_rss .news-contents p{
        width: calc(100% - 240px);
    }
}





/****  banner  ****/
.banner{
    width: 85%;
    max-width: 1200px;
    margin: 0 auto 30px;
}
.banner ul li a{
    display: block;
    margin-bottom: 10px;
}


@media screen and (min-width: 768px){
    .banner ul{
        display: flex;
        flex-wrap: wrap;
    }
    .banner ul li{
        width: 50%;
        padding: 0 5px;
    }
    
    
}
@media screen and (min-width: 1024px){
    .banner{
        width: 90%;
    }
    .banner ul li{
        width: 25%;
    }
}


/**********
philosophy
**********/
#philosophy{
    background: #fff;
}
.philocophy-ttl{
    background: url(/img/philosophy-topsp.jpg);
}
.philocophy-ttl h2{
    font-size: 9.8vw;
    letter-spacing: 0;
    text-shadow: 2px 3px 5px #fff;
    text-align: center;
    margin-top: 100px;
}
.phi-01-copy{
    padding-top: 11vw;
}
.phi-01-copy h3{
    font-size: 8vw;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: center;
}
.phi01-img{
    position: relative;
    margin: 35vw auto 30vw;
}
ul.moyamoya{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
    position: absolute;
    top: -80px;
}
ul.moyamoya li{
    width: calc(100% / 3);
    height: 25vw;
    position: relative;
}
ul.moyamoya li:nth-child(odd){
    animation: moyamoya 3s ease-in-out 0s infinite alternate;
}
ul.moyamoya li:nth-child(even){
    animation: moyamoya 3s ease-in-out 0s infinite alternate-reverse;
}
@keyframes moyamoya{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-10px);
    }
}


ul.moyamoya li:first-child{
    margin-bottom: 35vw;
}
ul.moyamoya li:nth-of-type(2){
    margin-top: -30px;
}
ul.moyamoya li:nth-of-type(5){
    margin-top: 30px;
}
ul.moyamoya li:before{
    content: "";
    display: block;
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background: #9b8579;
    filter: blur(10px);
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
}
ul.moyamoya li:after{
    font-size: 4vw;
    color: #fff;
    height: 25vw;
    white-space: pre;
    position: absolute;
    right: 0;
    left: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
ul.moyamoya li:nth-of-type(1):after{
    content: "疲れが\Aとれない";
    
}
ul.moyamoya li:nth-of-type(2):after{
    content: "食欲が\Aない";
}
ul.moyamoya li:nth-of-type(3):after{
    content: "よく\A眠れない";
}
ul.moyamoya li:nth-of-type(4):after{
    content: "身体が\A冷える";
}
ul.moyamoya li:nth-of-type(5):after{
    content: "肩こりが\Aつらい";
}
ul.moyamoya li:nth-of-type(6):after{
    content: "夜中に\A目覚める";
}

@media screen and (min-width: 768px){
    .philocophy-ttl h2{
        font-size: 6rem;
    }
    
    
}
@media screen and (min-width: 1024px){    
    .philocophy-ttl{
        background: url(/img/philosophy-toppc.jpg);
    }
    .phi-01-copy{
        padding-top: 100px;
    }
    .phi-01-copy h3{
        font-size: 3.4rem;
    }
    .phi-01-copy h3 .min-1024{
        display: inline;
    }
    .phi-01-content{
        display: flex;
        margin: 100px auto 160px;
    }
    .phi01-img{
        margin: 0;
        width: 450px;
    }
    .phi01-img img{
        margin-top: calc(50% - 120px);
    }
    ul.moyamoya{
        top: 0;
    }
    ul.moyamoya li{
        width: 150px;
        height: 150px;
    }
    ul.moyamoya li:first-child{
        margin-bottom: 200px;
    }
    ul.moyamoya li:before{
        width:130px;
        height: 130px;
    }
    ul.moyamoya li:after{
        font-size: 2.4rem;
        line-height: 1.3;
        width: 150px;
        height: 130px;
    }
    
    
    
    
    
    
}
@media screen and (min-width: 1025px){
    .phi01-img{
        width: 500px;
    }
    .phi01-img img{
        margin-top: calc(50% - 140px);
    }
    ul.moyamoya li{
        width: 166.666px;
        height: 166.666px;
    }
    ul.moyamoya li:first-child{
        margin-bottom: 220px;
    }
    ul.moyamoya li:before{
        width: 150px;
        height: 150px;
    }
    ul.moyamoya li:after{
        width: 166.666px;
        height: 150px;
    }
    
    
    
    
}


/****  phi01-text  ****/
.phi01-text-outline{
    padding: 60px 0 80px;
    text-align: center;
}
.phi01-main{
    margin-bottom: 30px;
}
.phi01-main-2{
    margin-bottom: 60px;
}
.phi01-main dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 10.2vw;
    line-height: 1.2;
}
.phi01-main dd.equal{
    margin: 0 5px;
}
.phi01-main dl dd:last-child{
    color: #f15a24;
}
.phi01-main-2 dl dd:last-child{
    color: #22b573;
}

@media screen and (min-width: 768px){
    .phi01-text-outline{
        padding-bottom: 160px;
    }
    .phi01-main{
        font-size: 3rem;
    }
    .phi01-main-2{
        margin-bottom: 100px;
    }
    
    
}
@media screen and (min-width: 1024px){
    .phi01-text{
        width: calc(100% - 450px);
    }
    .phi01-text-outline{
        padding: 0;
    }
    .phi01-main{
        font-size: 2.4rem;
    }
    .phi01-main dl{
        font-size: 6rem;
        font-weight: bold;
    }
    .phi01-main-2{
        margin-bottom: 40px;
    }
    .phi01-text .message{
        line-height: 1.5;
        padding: 0 20px;
    }
}
@media screen and (min-width: 1025px){
    .phi01-text{
        width: calc(100% - 500px);
    }
    
}


/****  philosophy_02  ****/
.phi-02-copy{
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0;
    line-height: 1.3;
}
.phi-02-copy h3{
    font-size: 7.4vw;
}
.phi-02-copy p{
    color: #23b476;
    font-size: 8vw;
}
.phi-02-message{
    text-align: center;
    background-color: #e0edc2;
    padding: 40px 20px;
}
.phi-02-content{
    margin-bottom: 60px;
}
.phi-02-content ul{
    padding: 0 20px;
    position: relative;
}
.phi-02-content ul:before{
    content: "";
    display: block;
    width: 100%;
    height: 57vw;
    background-color: #e0edc2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.phi-02-content ul li{
    min-height: 36vw;
}
.phi-02-content ul li:not(:last-child){
    margin-bottom: 30px;
    position: relative;
}
.phi-02-content ul li dl{
    display: flex;
}
.phi02-icon{
    width: 23.34vw;
    height: 23.34vw;
    font-size: 16px;
    color: #fff;
    position: relative;
}
.phi02-icon:before{
    content: "";
    display: block;
    width: 32vw;
    height: 32vw;
    position: absolute;
    top: 0;
    left: -10px;
    z-index: 1;
}
.phi-02-content ul li:nth-of-type(1) dl dd.phi02-icon:before{
    background: url(/img/philosophy-02-1.png) no-repeat center / cover;
}
.phi-02-content ul li:nth-of-type(2) dl dd.phi02-icon:before{
    background: url(/img/philosophy-02-2.png) no-repeat center / cover;
}
.phi-02-content ul li:nth-of-type(3) dl dd.phi02-icon:before{
    background: url(/img/philosophy-02-3.png) no-repeat center / cover;
}
.phi-02-content ul li:not(:last-child) .phi02-icon::after{
    content: "";
    display: block;
    width: 3.615vw;
    height: 10.28vw;
    position: absolute;
    top: 27vw;
    left: 7.5vw;
    background: url(/img/philosophy-arrow-sp.png) no-repeat center / cover;
}
.phi02-icon span{
    font-size: 5vw;
    width: 23.34vw;
    text-align: center;
    height: 23.34vw;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-flow: column;
    justify-content: center;
    left: -10px;
}
.phi-02-content ul li dl dd:last-child{
    width: calc(100% - 23.34vw);
    text-align: center;
    font-size: 1.5rem;
}
.phi-02-content ul li dl dd .ttl01{
    background: #898989;
    color: #fff;
    margin-bottom: 5px;
}
.phi-02-content ul li dl dd .ttl02{
    font-weight: bold;
    margin-bottom: 5px;
}


@media screen and (min-width: 768px){
    .phi-02-content ul li dl dd:last-child{
        font-size: 2.4rem;
    }
    .phi-02-content ul li dl dd .ttl01{
        font-size: 2.8rem;
    }
    .phi-02-content ul li dl dd .ttl02{
        font-size: 2.8rem;
        line-height: 1.3;
        margin: 20px auto;
    }
    .phi-02-content ul li dl dd:last-child p{
        line-height: 1.3;
    }
    
    
}
@media screen and (min-width: 1024px){
    .phi-02-copy h3{
        font-size: 5rem;
    }
    .phi-02-copy p{
        font-size: 5.4rem;
    }
    .phi-02-message{
        padding: 0 0 60px;
        text-align: left;
        width: 940px;
        margin: 0 auto;
    }
    .phi-02-message, .phi-02-content ul:before{
        background:none;
    }
    .phi-02-content ul{
        display: flex;
    }
    .phi-02-content ul li{
        width: calc(100% / 3);
        min-height: initial;
    }
    .phi-02-content ul li dl{
        flex-flow: column;
    }
    .phi02-icon, .phi02-icon:before{
        width: 250px;
        height: 250px;
    }
    .phi02-icon{
        margin: 0 auto;
    }
    .phi02-icon:before{
        left: 0;
    }
    .phi02-icon span{
        width: 250px;
        height: 178px;
        font-size: 5rem;
        left: -35px;
    }
    .phi-02-content ul li:not(:last-child) .phi02-icon::after{
        background: url(/img/philosophy-arrow-pc.png) no-repeat center / cover;
        width: 104.533px;
        height: 18.133px;
        left: 191px;
        top: 85px;
    }
    .phi-02-content ul li dl dd:last-child{
        width: 100%;
        padding: 0 10px;
    }
    .phi-02-content ul li dl dd .ttl01{
        font-size: 2.4rem;
    }
    .phi-02-content ul li dl dd .ttl02{
        margin-top: 20px;
        font-size: 2.4rem;
        height: 62.5px;
        line-height: 1.3;
    }
    .phi-02-content ul li dl dd:last-child p{
        font-size: 2rem;
    }
    
    
    
}
@media screen and (min-width: 1025px){
    .philosophy_02{
        padding-top: 100px;
    }
    .phi-02-content{
        margin: 0 auto 60px;
    }
    .phi-02-content ul li:not(:last-child) .phi02-icon::after{
        left: 200px;
    }
    
    
    
}
@media screen and (min-width: 1200px){
    .phi-02-content ul{
        padding: 0;
    }
    .phi-02-content ul li:not(:last-child) .phi02-icon::after{
        left: 232px;
    }
    
    
    
}


/****  philosophy_03  ****/
.phi-03-copy h2{
    color: #23b476;
    text-align: center;
    font-size: 7vw;
    line-height: 1.2;
}
.phi03-content-01, .phi03-content-02 dd{
    padding-bottom: 60px;
}
.phi03-content-02 dl:last-child dd:first-child{
    padding-bottom: 40px;
}
.phi03-content-01 h3.tsukushi{
    text-align: center;
    font-weight: bold;
    font-size: 7.6vw;
}
.phi03-content-01 dd:first-child img{
    display: block;
    width: 70%;
    margin: 10px auto 40px;
}
.phi03-content-02 h4{
    color: #22b573;
    font-size: 1.2em;
    margin-bottom: 10px;
}
.phi03-02-img{
    margin-top: 60px;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}
.phi03-02-img img{
    display: block;
    width: 80%;
    margin: 20px auto 0;
}
.phi03-content-02 dl:last-child h5{
    color: #22b573;
    font-size: 1.2em;
    margin-bottom: 10px;
    margin-top: 40px;
}
.phi03-content-02 dl:last-child li{
    position: relative;
    padding-left: 25px;
    font-size: .9em;
}
.phi03-content-02 dl:last-child li:before{
    content: "●";
    position: absolute;
    left: 0;
}
.phi03-content-02 dl:last-child img{
    width: 70%;
    display: block;
    margin: 0 auto 40px;
}
.phi03-content-02 dl:last-child span.sp_only{
    display: inline;
}

@media screen and (min-width: 768px){
    .phi03-content-02 dl:last-child li{
        font-size: 1.2em;
        padding-left: 40px;
    }
    
    
    
}
@media screen and (min-width: 1024px){
    .philosophy_03{
        margin-top: 100px;
        padding-bottom: 100px;
    }
    .phi-03-copy h2, .phi03-content-01 h3.tsukushi{
        font-size: 5rem;
    }
    .phi-03-content{
        margin-top: 60px;
        line-height: 1.6;
    }
    .phi-03-content dl{
        display: flex;
        margin-bottom: 60px;
    }
    .phi-03-content dl dd{
        width: 50%;
        padding: 0 20px;
    }
    .phi03-content-01 dd:first-child img{
        display: none;
    }
    .phi03-02-img{
        font-size: 1em;
    }
    .phi03-content-02 dl:last-child li{
        font-size: 1em;
        padding-left: 30px;
    }
    .phi03-content-02 dl:last-child dd:last-child{
        padding-top: 60px;
    }
    .phi03-content-02 dl:last-child span.sp_only{
        display: none;
    }
    .phi03-content-02 dl:last-child span.min-1024{
        display: inline;
    }
    
    
    
}


/**********
concept
**********/

/****  concept_01  ****/
#concept{
    background: #fff;
}
.concept-ttl{
    background-position: right bottom!important;
    background: url(/img/concept-topsp.jpg);
}
.concept-ttl h2{
    color: #fff;
    font-size: 9.8vw;
    letter-spacing: 0;
    text-align: center;
    margin-top: 100px;
}
#concept #content-background{
    padding-top: 40px;
}
.concept_01{
    text-align: center;
}
.concept01-copy{
    margin-bottom: 30px;
}
.concept-flex-1 h3{
    color: #00a99d;
    line-height: 1.3;
    margin-bottom: 30px;
}
.concept01-img{
    position: relative;
    width: 100%;
    padding: 40px 0 60px;
    overflow: hidden;
}
.concept01-img img{
    width: 70%;
}
.concept01-img:after{
    content: "";
    width: calc(100vw - 60px);
    height: calc(100vw - 60px);
    position: absolute;
    top: 2%;
    left: 4%;
    animation: circle 40s linear 0s infinite;
    background: url(/img/circle-arrow.png) no-repeat center / cover;
    opacity: 0.6;
}
@keyframes circle{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.concept-flex-1 dd:first-child{
    margin-bottom: 30px;
}
.concept01-list li{
    margin-bottom: 20px;
}
.concept01-list li dl{
    display: flex;
}
.concept01-list li dl dt{
    width: 50px;
}
.concept01-list li dl dd{
    width: calc(100% - 50px);
    padding-left: 5px;
    text-align: left;
}
.concept01-list .flex-icon, .concept01-list .flex-icon:before, .concept01-list .flex-icon .flex-icon2{
    width: 45px;
    height: 45px;
}
.concept01-list .flex-icon{
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.concept01-list .flex-icon:before{
    content: "";
    display: block;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
}
.concept01-list .flex-icon .flex-icon2{
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: bold;
    position: relative;
    padding-bottom: 4px;
}
.flex-icon2.ki{
    color: #f05924;
}
.flex-icon2.chi{
    color: #ed1c23;
}
.flex-icon2.mizu{
    color: #00a0ea;
}
.flex-text{
    font-size: .875em;
}
.flex-text .text-1{
    margin-bottom: 10px;
}
.flex-text .strong{
    font-size: 2.2rem;
    font-weight: bold;
    position: relative;
}
.flex-text .yomi{
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0;
    position: absolute;
    left: calc(50% - 32.5px);
    top: -10px;
    width: 65px;
    text-align: center;
}
.flex-text .text-2 .omo{
    display: inline-block;
    background: #666666;
    color: #fff;
    font-size: 1.4rem;
    padding: 3px 5px;
    margin-right: 5px;
}

@media screen and (min-width: 768px) {
    .concept-ttl h2{
        font-size: 6rem;
    }
    #concept #content-background{
        padding-top: 100px;
    }
    .concept01-img img{
        width: 300px;
    }
    .concept01-img:after{
        width: 400px;
        height: 400px;
        top: calc(50% - 200px);
        left: calc(50% - 200px);
    }
    .concept01-list li dl dt{
        width: 100px;
    }
    .concept01-list li dl dd{
        width: calc(100% - 100px);
        padding-left: 40px;
    }
    .concept01-list .flex-icon, .concept01-list .flex-icon:before, .concept01-list .flex-icon .flex-icon2{
        width: 100px;
        height: 100px;
    }
    .concept01-list .flex-icon .flex-icon2{
        font-size: 4rem;
    }
    .flex-text, .flex-text .text-2 .omo{
        font-size: 1em;
    }
    .flex-text .strong{
        font-size: 1.4em;
    }
    .flex-text .yomi{
        font-size: 12px;
        width: 100px;
        left: calc(50% - 50px);
        top: -1em;
    }
    .flex-text .text-2 .omo{
        margin-right: 10px;
    }
    
    
    
    
}
@media screen and (min-width: 1024px) {
    .concept01-copy{
        margin-bottom: 80px;
    }
    .concept-flex-1{
        display: flex;
        margin-bottom: 80px;
    }
    .flex-1-left{
        width: 500px;
    }
    .flex-1-right{
        width: calc(100%  -500px);
    }
    .concept01-list .flex-icon, .concept01-list .flex-icon:before, .concept01-list .flex-icon .flex-icon2{
        width: 80px;
        height: 80px;
    }
    .concept01-list .flex-icon{
        margin: 0 auto;
    }
    .concept01-list .flex-icon .flex-icon2{
        font-size: 4rem;
    }
    .concept01-list li dl dd{
        padding-left: 10px;
    }
    .flex-text, .flex-text .text-2 .omo{
        font-size: 2rem;
        letter-spacing: 1px;
        line-height: 1.5;
    }
    
    
    
    
    
}
@media screen and (min-width: 1025px){
    .concept01-img img{
        width: 400px;
    }
    .concept01-img:after{
        width: 500px;
        height: 500px;
        top: calc(50% - 250px);
        left: calc(50% - 250px);
    }
    
    
    
    
}

/****  concept_02  ****/
.concept_02{
    text-align: center;
    padding: 60px 0;
}
.concept02-copy{
    margin-bottom: 30px;
}
.concept02-copy h3{
    font-size: 8vw;
}
.flex-2-left{
    margin-bottom: 30px;
}
.concept02-list li:not(:last-child){
    margin-bottom: 30px;
}
.concept02-list li h4{
    display: block;
    color: #fff;
    width: 80%;
    margin: 0 auto 15px;
    padding: 8px;
    letter-spacing: 6px;
    font-weight: 300;
    font-size: 2.2rem;
    background: linear-gradient(to right, #fff 0%, #f39360 20%, #f39360 80%, #fff);
}
.concept02-list li:nth-of-type(2) h4{
    background: linear-gradient(to right, #fff 0%, #23a55c 20%, #23a55c 80%, #fff);
}
.concept02-list li p{
    text-align: left;
}
.concept02-list a.blue-btn{
    max-width: 270px;
    margin: 0 auto;
}
.concept02-list a.blue-btn span{
    padding-left: 35px;
}



@media screen and (min-width: 768px){
    .concept_02{
        padding: 100px 0;
    }
    .concept02-copy{
        font-size: 3rem;
        letter-spacing: 3px;
        line-height: 1.5;
        margin-bottom: 60px;
    }
    .concept02-copy h3{
        font-size: 5rem;
    }
    .flex-2-left{
        margin-bottom: 60px;
    }
    .flex-2-left img{
        max-width: 800px;
        margin: 0 auto;
    }
    .concept02-list li h4{
        font-size: 3.4rem;
    }
    .concept02-list li:last-child{
        margin-top: 60px;
    }
    
    
}
@media screen and (min-width: 1024px){
    .concept-flex-2{
        display: flex;
    }
    .flex-2-left, .flex-2-right{
        width: 50%;
    }
    .flex-2-left{
        padding-right: 40px;
    }
    .concept02-list{
        font-size: 2rem;
    }
    .concept02-list li:not(:last-child){
        margin-bottom: 40px;
    }
    .concept02-list li:last-child{
        margin-top: 40px;
    }
    .concept02-list li h4{
        font-size: 3rem;
        line-height: 1.3;
    }
    
    .concept02-list a.blue-btn span{
        padding-left: 40px;
    }
    
    
}

/****  concept_03  ****/
.concept_03{
    padding-bottom: 100px;
}
.concept03-copy{
    margin-bottom:30px;
}
.concept03-copy h2{
    font-size: 2.2rem;
    text-align: center;
}
.concept-flex-3{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background: url(/img/concept-03-sp.png) no-repeat center / contain;
}
.concept-flex-3 dd:first-child{
    width: 100%;
    margin-bottom: 20px;
}
.concept-flex-3 dd:nth-of-type(n+2){
    width: 50%;
    margin-bottom: 0;
}
.concept-flex-3 .concept03-img{
    display: flex;
    flex-flow: column;
    justify-content: end;
    padding: 0 10px;
}
.concept-flex-3 dd:first-child .concept03-img{
    padding: 0 20px;
}
.concept-flex-3 .concept03-ttl{
    background: linear-gradient(to right, #fff 0%, #23a55c 20%, #23a55c 80%, #fff);
    text-align: center;
    color: #fff;
    margin: 10px auto;
    padding: 8px;
    letter-spacing: 6px;
    font-size: 2.2rem;
}
.concept-flex-3 dd:nth-of-type(2) .concept03-ttl{
    background: linear-gradient(to right, #fff 0%, #2baeae 20%, #2baeae 80%, #fff);
}
.concept-flex-3 dd:nth-of-type(3) .concept03-ttl{
    background: linear-gradient(to right, #fff 0%, #f39360 20%, #f39360 80%, #fff);
}
.concept-flex-3 .concept03-text{
    font-size: 2rem;
    line-height: 1.3;
}
.concept-flex-3 .hosoku{
    font-size: .8em;
    letter-spacing: 0;
    display: block;
    margin-top: 10px;
}



@media screen and (min-width: 768px){
    .concept03-copy{
        margin-bottom: 60px;
    }
    .concept03-copy h2{
        font-size: 3.2rem;
    }
    .concept-flex-3 dd:first-child{
        width: 500px;
        margin: 0 auto 40px;
    }
    .concept-flex-3 dd:nth-of-type(n+2){
        padding: 0 40px;
    }
    .concept-flex-3 .concept03-ttl{
        font-size: 3.2rem;
    }
    .concept-flex-3 .concept03-text{
        font-size: 2.8rem;
    }
    .concept-flex-3 .hosoku{
        letter-spacing: 2px;
    }
    
    
    
    
}
@media screen and (min-width: 1024px){
    .concept03-copy{
        margin-bottom: 100px;
    }
    .concept03-copy h2{
        line-height: 1.6;
    }
    .concept-flex-3{
        background: none;
    }
    .concept-flex-3 dd{
        width: calc(100% / 3)!important;
    }
    .concept-flex-3 .concept03-img{
        padding: 0!important;
        height: 210px;
        justify-content: center;
    }
    .concept-flex-3 .concept03-ttl{
        font-size: 3rem;
        line-height: 1.3;
        margin-bottom: 20px;
    }
    .concept-flex-3 .concept03-text{
        font-size: 2.4rem;
    }
    
    
    
    
}
@media screen and (min-width: 1025px){
    .concept-flex-3 .concept03-ttl{
        margin-top: 50px;
    }
}


/**********
product
**********/
#product{
    background: #fff;
}
.product-ttl{
    background: url(/img/product-topsp.jpg);
}
.product-ttl h2{
    color: #fff;
    font-size: 9.8vw;
    letter-spacing: 8px;
    text-align: center;
    margin-top: 100px;
}
#product #content-background{
    padding-top: 40px;
    padding-bottom: 100px;
}
.product_01{
    text-align: center;
}
.product-list ul li:not(:last-child){
    margin-bottom: 40px;
}
.product-outline{
    position: relative;
    text-align: center;
    padding: 40px 20px;
    background: url(/img/product-background.jpg) no-repeat center / cover;
}
.product-outline h3{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left:0;
    top:0;
    color: transparent;
}
#product .p-copy{
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.5;
}
#product .p-img{
    margin: 15px auto;
}
#product .p-link{
    width: 260px;
    margin: 0 auto;
}

@media screen and (min-width: 768px){
    .product-ttl h2{
        font-size: 8rem;
        letter-spacing: 4rem;
        text-shadow: 5px 5px 5px #000;
    }
    #product #content-background {
        padding-top: 100px;
        padding-bottom: 200px;
    }
    .product-list ul{
        display: flex;
        flex-wrap: wrap;
    }
    .product-list ul li{
        margin: 0;
        width: 50%;
        padding: 20px;
    }
    #product .p-copy{
        font-size: 2.4rem;
        height: 72px;
    }
    
    
    
}
@media screen and (min-width: 1024px){
    .product-ttl{
        background: url(/img/product-toppc.jpg);
    }
    
    
    
    
}
@media screen and (min-width: 1025px){
    .product-list ul li{
        width: calc(100% / 3);
    }
    
    
    
    
}


/**********
faq
**********/
#faq{
    background: #fff;
}
.faq-ttl{
    background: url(/img/faq-topsp.jpg);
}
.faq-ttl h2{
    font-size: 9.8vw;
    letter-spacing: 8px;
    text-shadow: 2px 3px 5px #fff;
    text-align: center;
    margin-top: 30px;
}
#faq #content-background{
    padding-top: 40px;
    padding-bottom: 100px;
}
.faq-list li:not(:last-child){
    margin-bottom: 30px;
}
.faq-q dl{
    display: flex;
}
.q-img{
    width: 100px;
}
.q-img span{
    background: #fff799;
    display: block;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.q-img span img{
    padding-top: 8px;
}
.q-text{
    width: calc(100% - 100px);
}
.q-text .question{
    display: block;
    position: relative;
    height: 47px;
    border-bottom: 2px solid #ed1e79;
    color: #ed1e79;
    font-weight: bold;
    font-size: 3rem;
    margin-left: 10px;
}
.q-text .question:after{
    content: "";
    width: 46.428px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(/img/faq-icon-question.png) no-repeat center / cover;
}
.q-text p, .a-text p{
    padding: 10px 20px;
    letter-spacing: 1px;
}
.a-img span{
    background: #87c7c7;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: block;
    float: right;
    margin: 0 0 10px 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.a-img span img{
    padding-top: 10px;
}
.a-text .answer{
    display: block;
    position: relative;
    height: 47px;
    border-bottom: 2px solid #02a99c;
    color: #02a99c;
    font-weight: bold;
    font-size: 3rem;
    margin-right: 20px;
}
.a-text .answer:after{
    content: "";
    width: 43.421px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(/img/faq-icon-answer.png) no-repeat center / cover;
}
.a-text .hosoku{
    color: #02aa9e;
    font-weight: bold;
}
.faq-more-01{
    background: #cae5f8;
    display: block;
    padding: 10px;
}
.faq-more01{
    border: 1px solid #fff;
    padding: 15px 10px;
    text-align: center;
    font-weight: bold;
}
.faq-more01 p{
    font-weight: 300;
}
.faq-more-02{
    max-width: 750px;
    margin: 30px auto 0;
}
.faq-more02-text{
    margin-bottom: 20px;
}
.faq-more02-text p{
    padding: 0;
    letter-spacing: inherit;
}
.faq-more02-link a{
    display: block;
}



@media screen and (min-width: 768px){
    #faq #content-background {
        padding-top: 100px;
        padding-bottom: 200px;
    }
    .faq-ttl h2{
        font-size: 6rem;
    }
    .faq-list li:not(:last-child){
        margin-bottom: 100px;
    }
    
}
@media screen and (min-width: 1024px){
    .faq-ttl{
        background: url(/img/faq-toppc.jpg);
        background-position: bottom 32% center !important;
    }
    .faq-q{
        width: 70%;
    }
    .faq-a{
        width: 70%;
        margin-left: 30%;
    }
    .faq-more-02{
        margin-top: 60px;
        max-width: inherit;
        padding: 0 5%;
    }
    .faq-more02-link{
        width: 600px;
        margin-left: calc(100% - 600px);
    }
    
    
    
    
    
}


/**********
about
**********/
#about{
    background: #fff;
}
.about-ttl{
    background: url(/img/about-topsp.jpg);
}
.about-ttl h2{
    font-size: 9.8vw;
    letter-spacing: 20px;
    text-align: center;
    margin-top: 99px;
    color: #fff;
}
#about #content-background{
    padding-top: 40px;
    padding-bottom: 100px;
}
.about-summary dl{
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 10px;
}
.about-summary dt{
    width: 100px;
    padding: 5px;
    text-align: center;
    background: #000;
    color: #fff;
}
.about-summary dd{
    width: calc(100% - 100px);
    padding-left: 10px;
}
.about-concept, .about-history, .about-access{
    margin: 60px auto;
}
.about-access{
    margin-bottom: 20px;
}
#about h3{
    color: #229773;
    font-size: 1.6em;
    margin-bottom: 10px;
}
.concept01{
    border-bottom: 1px solid;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.history-hosoku{
    display: block;
    text-align: right;
}
.map iframe{
    width: 100%;
    aspect-ratio: 16/9;
}
.about02-copy h2{
    text-align: center;
    font-size: 1.2em;
}
.about02-copy .hosoku{
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin: 20px auto 40px;
}
.about02-copy .hosoku .detail:after{
    content: "/";
    margin: 0 5px;
}
.about-payment .sp_only p{
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}






@media screen and (min-width: 768px){
    #about #content-background {
        padding-top: 100px;
        padding-bottom: 200px;
    }
    .about-ttl h2{
        font-size: 7rem;
        margin-top: 143px;
    }
    .about-summary dl{
        margin-bottom: 20px;
    }
    .about-summary dt{
        width: 200px;
    }
    .about-summary dd{
        width: calc(100% - 200px);
        padding-left: 20px;
    }
    .about-payment .sp_only p{
        font-size: 2.8rem;
    }
    
    
    
    
}
@media screen and (min-width: 1024px){
    .about-ttl{
        background: url(/img/about-toppc.jpg);
    }
    .about-ttl h2{
        margin-top: 130px;
    }
    .about-concept, .about-history, .about-access{
        max-width: 1000px;
        margin: 100px auto;
    }
    .about-access{
        margin-bottom: 20px;
    }
    .about-summary{
        max-width: 880px;
        margin: 0 auto;
    }
    .about-history p{
        display: inline;
    }
    .history-hosoku{
        display: inline;
        text-align: left;
        margin-left: 1em;
    }
    .about02-copy .hosoku{
        max-width: 800px;
    }
    .about02-copy .hosoku dl{
        display: flex;
    }
    .about02-copy .hosoku dd{
        width: 50%;
    }
    .about-mark{
        margin-bottom: 60px;
    }
    
    
    
    
    
    
    
}
@media screen and (min-width: 1025px){
    #fixed-ttl.about-ttl{
          background-position: top 35% center;
    }
    .about-ttl h2{
        margin-top: 200px;
        font-size: 8rem;
    }
    .about-pc-flex{
        display: flex;
        justify-items: center;
        align-items: center;
    }
    .about-flex-text{
        width: calc(100% - 450px);
        padding-right: 40px;
    }
    .about-flex-img{
        width: 450px;
    }
    .about-flex-img span{
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: url(/img/about-img.jpg) no-repeat center / cover;
        display: block;
    }
    .history-hosoku{
        display: block;
        text-align: right;
    }
    
    
}


/**********
contact
**********/
/****  contact_01 ****/
.contact-01{
    margin-bottom: 100px;
}
.contact-tel{
    text-align: center;
    margin-bottom: 60px;
}
.contact-tel .name{
    font-size: 10vw;
    font-weight: bold;
    letter-spacing: 4px;
}
.contact-tel .tel{
    font-size: 10vw;
    font-weight: bold;
}
.contact-tel .tel:before{
    content: "";
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-right: 5px;
    background: url(/img/phone.png) no-repeat center / cover;
    vertical-align: baseline;
}
#contact-form .name{
    font-size: 8vw;
    text-align: center;
}
#contact-form .formrun-embed, #contact-form .form{
    position: relative;
    overflow: hidden;
    height: 2300px;
}
#contact-form .formrun-embed iframe, #contact-form .form iframe{
    width:100%;
    height: 3000px!important;
    position: absolute;
    top: -278px;
}


@media screen and (min-width: 768px){
    .contact-tel{
        margin-bottom: 150px;
        line-height: 1.5;
    }
    .contact-tel .name, .contact-tel .tel{
        font-size: 6rem;
    }
    #contact-form .name{
        font-size: 4rem;
    }
    #contact-form .formrun-embed, #contact-form .form{
        height: 2230px;
    }
    
    
    
    
    
}
@media screen and (min-width: 1025px){
    #contact-form .formrun-embed, #contact-form .form{
        height: 2000px;
    }
    .contact-01{
        margin-bottom: 200px;
    }
    
    
    
    
}




/****  contact_02 ****/
#contact{
    background: #fff;
}
.contact-ttl{
    background: url(/img/contact-topsp.jpg);
}
.contact-ttl h2{
    font-size: 9.8vw;
    letter-spacing: 8px;
    text-align: center;
    text-shadow: 2px 3px 5px #fff;
    margin-top: 30px;
}
#contact #content-background{
    padding-top: 40px;
    padding-bottom: 100px;
}
.contact-flow{
    border: 1px solid #ddd;
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.contact-flow h2.flow-ttl{
    background: #000;
    color: #fff;
    text-align: center;
    width: 260px;
    padding: 5px;
    margin: 0 auto 30px;
}
#contact .flow dl, #contact .flow dl:not(:first-child) li{
    margin-bottom: 60px;
}
#contact .flow dl:not(:last-child):after, #contact .flow dl:not(:first-child) li:after{
    content: "";
    width: 56px;
    height: 85px;
    background: url(/img/arrow-under.png) no-repeat center / cover;
    display: block;
    margin: 10px auto;
}
#contact .flow dl:last-child li:last-child:after{
    display: none;
}
#contact .flow dt h3{
    background: #22b173;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 50%;
    margin-bottom: 20px;
}
#contact .flow dl:nth-of-type(1) dd{
    margin-top: 20px;
}
#contact .flow dl:nth-of-type(1) dd img{
    width: 70%;
    max-width: 500px;
}
#contact .flow dl:nth-of-type(1) dd img:nth-of-type(1){
    margin-left: 30%;
}
#contact .flow dl:nth-of-type(1) dd img:nth-of-type(2){
    margin-top: -17%;
}





@media screen and (min-width: 768px){
    #contact #content-background {
        padding-top: 100px;
        padding-bottom: 200px;
    }
    .contact-ttl h2{
        font-size: 6rem;
    }
    .contact-flow h2.flow-ttl{
        margin-bottom: 60px;
    }
    #contact .flow dt h3{
        max-width: 600px;
        margin: 0 auto 40px;
    }
    #contact .flow dl:not(:first-child) dt{
        text-align: center;
    }
    #contact .flow dl:nth-of-type(1) dd{
        width: 500px;
        margin: 40px auto 0;
    }
    #contact .flow dl:nth-of-type(1) dd img{
        width: 60%;
    }
    #contact .flow dl:nth-of-type(1) dd img:nth-of-type(1){
        margin-left: 40%;
    }
    #contact .flow dl:nth-of-type(1) dd img:nth-of-type(2){
        margin-top: -25%;
    }
    #contact .flow dl, #contact .flow dl:not(:first-child) li{
        margin-bottom: 100px;
    }
    #contact .flow .sp_only{
        width: 500px;
        margin: 0 auto;
    }
    
    
}
@media screen and (min-width: 1024px){
    .contact-ttl{
        background: url(/img/contact-toppc.jpg);
        background-position: bottom 32% center !important;
    }
    .contact-flow h2.flow-ttl{
        font-size: 4rem;
        width: 400px;
        letter-spacing: 6px;
    }
    #contact .flow dl{
        display: flex;
        align-items: center;
    }
    #contact .flow dl:not(:last-child):after, #contact .flow dl:not(:first-child) li:after{
        display: none;
    }
    #contact .flow dt{
        width: 60%;
    }    
    #contact .flow dd{
        width: 40%;
    }
    #contact .flow dt h3{
        font-size: 3.2rem;
        letter-spacing: 3px;
        width: 500px;
    }
    #contact .flow dt p{
        padding: 0 20px;
        font-size: 3rem;
        letter-spacing: 1px;
        line-height: 1.5;
    }
    #contact .flow li:not(:last-child):after{
        content: "";
        width: 56px;
        height: 85px;
        background: url(/img/arrow-under.png) no-repeat center / cover;
        display: block!important;
        margin: 40px auto 0;
    }
    
    
    
    
    
}


/**********
note
**********/
#note{
    background: #fff;
}
.note-ttl{
    background: url(/img/note-topsp.jpg);
}
.note-ttl h2{
    font-size: 9.8vw;
    letter-spacing: 8px;
    text-align: center;
    text-shadow: 2px 3px 5px #fff;
    margin-top: 65px;
}
#note #content-background{
    padding-top: 40px;
    padding-bottom: 100px;
}
#column_rss .mu{
    position: relative;
    padding: 40px 20px;
    margin-bottom: 40px;
    background: #f5f5f5;
}
#column_rss .mu img {
    width: 100%;
    height: auto;
}
#column_rss .mu h3{
    font-size: 1.2em;
    margin: 10px auto;
}
#column_rss .mu small{
    display: none;
}
#column_rss .mu .contents{
    overflow: hidden;
    height: 6em;
    line-height: 1.5;
}
#column_rss .mu .morebotn{
    display: block;
    margin-top: 10px;
    color: #8d8d8d;
}
#column_rss .mu a{
    display: none;
}
#column_rss .mu a.btn {
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0
}
#note a.blue-btn{
    width: 300px;
    margin: 40px auto 0;
}




@media screen and (min-width: 768px){
    #contact #content-background {
        padding-top: 100px;
        padding-bottom: 200px;
    }
    .note-ttl h2{
        font-size: 6rem;
    }
}
@media screen and (min-width: 1024px){
    .note-ttl{
        background: url(/img/note-toppc.jpg);
    }
    #column_rss{
        display: flex;
        flex-wrap: wrap;
        width: 800px;
        margin: 40px auto;
    }
    #column_rss .mu{
        width: 50%;
        padding: 10px;
        background: none;
    }
}


/**********
privacy
**********/
#privacy{
    margin-top: 60px;
    padding: 60px 0 100px;
}
.privacy-01{
    margin-bottom: 60px;
}
.privacy-01 .copy{
    text-align: center;
    margin-bottom: 20px;
}
.privacy-02 .content{
    margin-bottom: 40px
}
.privacy-02 h3{
    color: #00a99d;
    margin-bottom: 10px;
}
.privacy-02 .content-list{
    margin-top: 1em;
}
.privacy-02 .content-list li{
    position: relative;
    padding-left: calc(1em + 5px);
}
.privacy-02 .content-list li:before{
    content: "◆";
    position: absolute;
    left: 0;
}
.privacy-02 .p-sunnature{
    margin-top: 30px;
}
.privacy-02 .p-sunnature h4{
    font-size: 1.2em;
    margin-bottom: 10px;
}
.privacy-02 .p-sunnature dt, .privacy-02 .p-sunnature dd{
    display: inline;
}
.privacy-02 .p-sunnature dt:after{
    content: ":";
    margin: 0 5px;
}
.privacy-02 .p-sunnature dd .nowrap{
    margin-left: 3em;
}




@media screen and (min-width: 768px){
    #privacy{
        margin-top: 101px;
        padding: 100px 0 200px;
    }
    .privacy-02 .p-sunnature dd .nowrap{
        margin-left: 0;
    }
}
@media screen and (min-width: 1024px){
    .privacy-01 .concept{
        width: 1000px;
        margin: 0 auto;
    }
    .privacy-02 .outline{
        display: flex;
    }
    .privacy-02 .outline .inner{
        width: 50%;
        padding: 0 20px;
    }
    .privacy-02 .p-sunnature dd .nowrap{
        margin-left: 3em;
    }
}


/**********
sitemap
**********/
#sitemap{
    margin-top: 60px;
    padding: 60px 0 100px;
}
.sitemap-ttl{
    text-align: center;
    margin-bottom: 40px;
}
.sitemap-list{
    width: 240px;
    margin: 0 auto;
}
.sitemap-list ul{
    line-height: 2.6;
}
.sitemap-list ul li a{
    display: block;
    padding-left: calc(1em + 5px);
    position: relative;
}
.sitemap-list ul li a:before{
    content: "＞";
    position: absolute;
    left: 0;
}




@media screen and (min-width: 768px){
    #sitemap{
        margin-top: 101px;
        padding: 100px 0 200px;
    }
    .sitemap-list{
        width: 55%;
    }
}
@media screen and (min-width: 1024px){
    .sitemap-ttl{
        margin-bottom: 100px;
    }
    .sitemap-list{
        width: 800px;
    }
    #sitemap .outline{
        display: flex;
    }
    #sitemap .outline .inner{
        width: 50%;
        padding: 0 40px;
    }
}