﻿@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
.font1,.t_cms_txt2,.cms_title .font_2up,#page_title .font_25{font-family: 'Allison', cursive;}
.font2,#contents h3,body{font-family: 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;}



/*--- all page-------------------------------
--------------------------------------------*/
#loading_logo{max-width:300px;}
.linkStyle{
    color:pink;
    text-decoration:underline;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
}
#page-top a{background-color: #c5b27a;}
.more:hover{border-color:#eac1c1;}

/*--- top page-------------------------------
--------------------------------------------*/
.main_img_wrap .navi{display:none;}
#main_img::before,#main_img::after{
    content:'';
    position:absolute;
    display:block;
}
#main_img::before{
    width:18vw;
    height:15vh;
    background-image:url(./Dup/img/logo_w.png);
    background-repeat:no-repeat;
    background-size:contain;
    top:32%;
    left:0;
    right:0;
    margin:auto;
    z-index:2;
}
#main_img::after{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    z-index:1;
}
#main_img .catch{
    top:50%;
    left:0;
    right:0;
    margin:auto;
    z-index:2;
    width:40vw;
    height:auto;
}
#contents{background-color:white;}
#contents .box{margin-bottom:200px;}
#contents .box figure:after{
    border:0;
    opacity:1;
}
#contents .box:nth-child(odd) figure:after{
    top: -20%;
    width: 100%;
    height: 100%;
    right:24%;
    /*background-color:#8566a1;  */
    background-image:url(./Dup/img/marble.jpg);
}
#contents .box:nth-child(even) figure:after{
    top: 20%;
    width: 120%;
    height: 100%;
    background-color:#8566a1;      
}
#contents .box:last-of-type{
    background-color:#f9eff2;
}
.img-container:before{
    background-color:#eac1c1;
}
.t_cms_img2 .img-container:before {
    background: #c183bf;
}
.con1_txt .item{
    top:-10%;
    right:35%;
    z-index:1;
}
.con1_txt,.con3_txt{
    width:40%;
    padding-right:7%;
}
.t_cms_txt2,.t_cms_txt5,.t_cms_txt8,.t_cms_txt11{
    letter-spacing:5px;
    font-size: 5rem;
    margin-bottom: 20px;
    transform:rotate(-5deg);
}
.t_cms_txt2{
    line-height: 0.8;
    margin-bottom:50px;
    position:relative;
}

#contents h3{
    margin-bottom:60px;
    padding-left:30px;
}
#contents .box h3:before{
    bottom: -25px;
    padding-left:30px;
}
.item2{
    top:-2%;
    left:42%;
    z-index:2;
}
.t_cms_txt4,.t_cms_txt7,.t_cms_txt10{padding-left:30px;}
.con2_txt{
    width:40%;
    padding-left:10%;
}
.t_cms_img1{width:40%;}
.t_cms_img2{width:30%;}
.t_cms_img3{width:35%;}
#contents .box h3:last-of-type{display:block;}
#contents .box:last-of-type h3::before{
    left: 0;
    right: 0;
    margin: auto;
}
.con4_txt {
    padding-top: 50px;
    padding-bottom: 70px;
}
#contents .sumaho img{
    width:200px;
    height:200px;
}
#top_cms .line{width:200px;}
.cms_title .txt_color3{
    font-size:2rem;
    transform:rotate(-5deg);
    margin-bottom:70px;
}
.svg_box{display:none;}


/*よくある質問cms_5-b*/
#cms_5-b .cate_box .open_bt .box_title1, .cms_5-b .cate_box .open_bt .box_title1{
    margin-left:50px;
}
#cms_5-b .cate_box .open_bt .box_title1::before, .cms_5-b .cate_box .open_bt .box_title1::before{
    font-size: 1.5rem;
    top: -7px;
}
#cms_5-b .cate_box .arrow, .cms_5-b .cate_box .arrow {
    position: absolute;
    left:auto;
    right: 20px;
    top: 50%;
    margin-top: -17px;
}
.cms_5-b .cate_box .open_bt .box_title1::before{color:rgb(216,162,39)!important;}
#cms_5-b .cate_box .box_item, .cms_5-b .cate_box .box_item{padding: 10px 0 10px;}
#cms_5-b .cate_box .box_txt1, .cms_5-b .cate_box .box_txt1{
    margin-left:50px;
    position:relative;
}
#cms_5-b .cate_box .box_txt1::before, .cms_5-b .cate_box .box_txt1::before{
    content: "A.";
    position: absolute;
    left: -32px;
    top: -8px;
    display: inline-block;
    vertical-align: baseline;
    color: rgb(216,113,39)!important;
    font-size:1.5rem;
}
#cms_5-b .cate_box .open_bt .arrow img,
.cms_5-b .cate_box .open_bt .arrow img{
    box-shadow:none;
}
#cms_5-b .arrow_be img, .cms_5-b .arrow_be img{
    transform: rotate(45deg)!important;
    transition:all 0.3s;
}
.topcms04box a{margin-top:0!important;}

/*--top pate animation-----------------*/
/*ローディング後にフェードイン*/
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-fade.done{opacity : 1; transform : translate(0, 0);}

/*右回転*/
.rotate {
  display: inline-block;
  font-size: 3em;
}
.rotate1 {
  animation: r1 30s linear infinite;
}
 
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}

/*下からフェードイン*/
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.txt_wrap .fadein.scrollin{
    transform:translate(0,0) rotate(-5deg);
}


/*--- under page-------------------------------
--------------------------------------------*/
#title_img{background-size:cover;}
#page_title .font_25{
    font-size:3rem;
    color: #8566a1;
}
.all_page{background-color: #e8e2ec!important;}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#loading_logo{max-width: 250px;}
.main_wrap{margin-top: 45vh;}
.con1_txt .item {
    top: -13%;
    right: 10%;
}
#main_img::before{width:27vw;}
#main_img .catch {
    top: 55%;
    width: 50vw;
}
#contents{padding-bottom:0;}
#contents .box {margin-bottom: 100px;}
#contents .txt_wrap{
    margin-bottom:50px;
    padding-left:0;
}
.con1_txt,.con2_txt,.con3_txt{width:100%;}
.con2_txt{
    padding-left:0;
    padding-right:7%;
}
.con4_txt{
    padding-top:50px;
    padding-bottom:70px;
}
.t_cms_txt2{font-size:3.5rem;}
.t_cms_img1,.t_cms_img3{width:50%;}
.t_cms_img2 {width: 35%;}
.cms_title .txt_color3{
    font-size: 3rem;
    margin-bottom: 20px;
}
.item2{
    top: 22%;
    left: 18%;
}
.item3{
    top:-9%;
    left: 18%;
}
#page_title .font_25{font-size:2rem;}
header .logo{width:20%;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#loading_logo {width: 50%;}
.main_wrap{margin-top: 97.5vh;}
#main_img::before{display:none;}
#main_img .catch {
    top: 45%;
    width: 90vw;
}
.t_cms_txt2, .t_cms_txt5, .t_cms_txt8, .t_cms_txt11{font-size:3rem;}
.con1_txt .item{
    top:-4%;
    right: -9%;
    width:45%;
}
#contents h3,.t_cms_txt4, .t_cms_txt7, .t_cms_txt10{padding-left:0;}
.item2{
    top:25%;
    right: 30%;
    width:45%;
}
.item3{
    top:-10%;
    right: 32%;
    width:45%;
}
#contents .box .txt_wrap{
    padding-left:20px;
    padding-right:20px;
}
#page_title .img-container::after {background-color: rgba(191,191,191,0.4)!important;}
#cms_5-b .cate_box .arrow,
.cms_5-b .cate_box .arrow{
    right:0;
}
#cms_5-b .cate_box .open_bt .box_title1,
.cms_5-b .cate_box .open_bt .box_title1{
    margin-right: 50px;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
.top_cms_box .more_box .more div,.page10 .more_box .more div{padding-top:0;}
.pager li a span{padding-top:10px;}
p.is-show > span > span{text-shadow:none;}
}


