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

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.qa_type1 .cate_box {border: solid 2px #def0ed;}
.qa_type1 .cate_box .arrow {
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: 0px;
	transform: translateY(-50%);
}
.qa_type1 .cate_box .open_bt{
	position: relative;
	width: 100%;
	cursor: pointer;
	padding: 20px 0
}
.qa_type1 .cate_box .open_bt .arrow::before, .qa_type1 .cate_box .open_bt .arrow::after {
	position: absolute;
	content: '';
	width: 15px;
	height: 1px;
	background-color: #7f787b;
}
.qa_type1 .cate_box .open_bt .arrow::before {
	top: 48%;
	left: 15px;
	transform: rotate(0deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .arrow::after {
	top: 48%;
	left: 15px;
	transform: rotate(90deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .arrow.arrow_be::before {
	transform: rotate(-135deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .arrow.arrow_be::after {
	transform: rotate(135deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .box_title1 {
	display: inline-block;
	position: relative;
	letter-spacing: 1px;
	cursor: pointer;
	margin-left: 87px;
}
.qa_type1 .cate_box .open_bt .box_title1::before {
	content: "Q.";
	position: absolute;
	left: -32px;
	top: 0px;
	display: inline-block;
	vertical-align: baseline;
	color: #aad9d0;
}
.qa_type1 .cate_box .box_item {
	display: none;
	padding: 0px 30px 0px;
}
.qa_type1 .cate_box .box_txt1 {
	padding: 1em;
	background-color: #f4f9f8;
}

@media screen and (max-width: 768px){
.qa_type1 .cate_box .open_bt .box_title1 {
	padding-right: 20px;
}
}
@media screen and (max-width: 667px){
.qa_type1 .cate_box .open_bt {
	padding: 5px 0 7px;
}
.qa_type1 .cate_box .open_bt .box_title1 {
	margin-left: 73px;
}
.qa_type1 .cate_box .box_txt1 {
	padding: 0.2em 1.2em;
}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/* color ----------------------------------------------------------------------*/
.txt_color1,.hvr_txt_color1:hover{color: #7f787b} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #aad9d0} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #e2b0c3} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #e8c8d5} /* アクセントカラー2 */
/* background-color */
.bg_color1,.hvr_bg_color1:hover{background-color: #aad9d0} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #e2b0c3} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #eefaf8} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #e8c8d5} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #aad9d0 !important}
.border_color2,.hvr_border_color2:hover{border-color: #e2b0c3 !important}
.border_color3,.hvr_border_color3:hover{border-color: #eefaf8 !important}
.border_color4,.hvr_border_color4:hover{border-color: #e8c8d5 !important}
/* hover -----------------------*/

/*linkStyle*/
a.linkStyle {
    color:#cc829e;
    border-bottom:solid 1px;
    transition: 0.5s;}
a.linkStyle:hover {
    color:#df9eb7;    
    border-bottom:solid 1px;}
    
body, .txt_color_nomal {color: #837878;}
/* color ----------------------------------------------------------------------*/

/* font ----------------------------------------------------------------------*/
.font_com,#cms_6-c h3,.cms_title p,.page_title_box p,.con_title .pop400,.con_box h2,a.more_btn,.pop400,a,.box_title1,.cate_title,.box_title2,.hannari
h2,h3,h4,h5,h6{font-family: 'Shippori Mincho', 'Noto Serif JP',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif" !important;}
body {font-family: 'Zen Maru Gothic',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;}
/*font-------------------------------------------------------------------------*/
html, body {font-size: 15px;}
.font_100per {
    font-size: -webkit-calc(1rem + 0.5px) !important;
    font-size: calc(1rem + 0.5px) !important;}
nav#pc_nav_fix a {font-size: 15px;}    
/* font ----------------------------------------------------------------------*/




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
div#head_logo span.bg_color1 {opacity: 0;}

#top_contents::before {
    background-color: rgb(255 255 255 / 60%);
    width: calc(100% - 200px);}
span.mark {
    background: linear-gradient(transparent 10%, #e9c2d1 0%);
    padding: 2px 5px;
    margin: 0 4px;
}


/*リボン----------------------------------------------------------------------*/
.ribbon13-wrapper {
    display: block;
    position: relative;
    padding: 20px 0 35px 0;}
.ribbon13 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 5px 0;
    margin: 0 0 0 -20px;
    width: calc(90% + 20px);
    color: white;
    background: #dba0b7;
    box-shadow: 0 2px 2px rgb(189 127 150 / 10%);}

.ribbon13 h3 {
    margin: 0;
    padding: 0 30px 0 15px;
    border-top: dashed 1px #FFF;
    border-bottom: dashed 1px #FFF;
    font-size: 24px;
    line-height: 55px;
}

.ribbon13:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 33px 15px 33px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.ribbon13:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px #c989a1;}
/*リボン----------------------------------------------------------------------*/

#intro .intro_txt {padding: 0px 50px;
            margin-top: 25px;}
#intro h2.intro_title { padding: 25px 50px 0;}

div#head_logo {display:none;}
.intro_txt_wrap {box-shadow: 10px 10px 10px rgb(232 200 213 / 10%);}
.intro_txt_wrap::before {
    content: '';
    position: absolute;
    width: 20vw;
    height: 24vh;
    background: url(dup/img/item02.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    right: 0;
    transform: translate(53%, 45%);}
    
div#wrap {overflow: hidden;}

#top_contents .con_box_01:before {
    content: '';
    position: absolute;
    width: 22vw;
    height: 39vh;
    background: url(dup/img/item03.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    transform: translate(-9%, -5%);
    z-index: 1;
    mix-blend-mode: multiply;
}

#top_contents .con_box_02:before {
    content: '';
    position: absolute;
    width: 18vw;
    height: 22vh;
    background: url(dup/img/item04.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    right: 0;
    transform: translate(57%, 33%);
    z-index: 1;
    opacity: 0.8;
}

/*p.contents_no{display: none;}*/

#top_cms .cms_title span {display: none;}
#top_cms .cms_wrap {
    background: rgb(255,255,255,0.7);
    padding: 50px;
    position: relative;}
#top_cms .cms_wrap::before {
    border: dashed 2px #e9d3db;
    content: '';
    position: absolute;
    display: block;
    width: 98%;
    height: 94%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: none;}
.swiper-button-prev, .swiper-button-next {padding: 0 50px;}
.cms_title,#top_cms .more.font_com {margin: 50px 0 30px;}
.cms_6-c .cate_box:first-of-type {margin-top: 30px;}
.cms_box {margin-bottom: 130px;}

#top_info .info_txt_wrap span, #top_cms .cms_title span {display: none;}

#main_img {
    z-index: 0;
    overflow: hidden;
    position: relative;
    max-height: 100vh;
    min-height: inherit;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
h1#logo { width: 150px;}
div#logo2 img {width: 170px;}
div#footer {background-color: rgb(255 255 255 / 60%);}
div#loader img {width: 300px;}
div#wrap {
    background: #faf1f3;
    background-size: auto auto;
    background-color: rgba(252, 246, 248, 1);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(249, 241, 243, 1) 4px, rgba(249, 241, 243, 1) 10px );
}


.res {
    background: #aad9d0;
    padding: 10px 0px;
    color: #fff;
    transition: 0.5s;}

.res:hover {
    background: #e2b0c3;
    padding: 10px 0px;
    color: #fff;}

.res {
    margin-left: 11px;}
    
.cms_title{position: relative;}    
.cms_title::before {
    content: '';
    position: absolute;
    width: 16vw;
    height: 20vh;
    background: url(dup/img/item02.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -40%) rotate(21deg);
    z-index: -2;
    opacity: 0.5;
}

#top_contents .con_box .contents_no {
    top: auto;
    left: -4px;
    z-index: 1;
    bottom: 69px;
    mix-blend-mode: multiply;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
    
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/    
#cms_2-a h3.cate_title {
    padding: 0;
    letter-spacing: 3px;
    border-bottom: dotted 2px #ff8d00;
    border-top: 0px;
}

.cms_wrap,.qa_type1 {
    background: rgba(255,255,255,0.6);
    padding: 5%;}

section#page_title {padding: 50px 0 0 0;}

section#page_title::before {
    content: '';
    position: absolute;
    width: 16vw;
    height: 20vh;
    background: url(dup/img/item02.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -27%) rotate(21deg);
    z-index: -2;
    opacity: 0.5;
}

section#page_title {
    position: relative;
    z-index: 1;}

ul.pager a {color: #fff;}

.footer_img {display: none;}
ul.cate_list a {color: #fff;}
#cms_6-c .circle, #cms_6-c .arrow {display:none;}
#cms_6-c .cate_box {margin-bottom:50px;
                    border-radius:0px 0px 5px 5px ;}
                    
.tel_wrap {
    background: rgba(255,255,255,0.6);
    border: solid 0;}
    
section#page7, section#page9, section#page10 {
    background: rgba(255,255,255,0.6);
    padding: 4%;}
    

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/    


/*タブレット*/
@media screen and (max-width: 768px){
    #main_img {height: 95vw!important;}
    div#logo2 img { width: 170px;}
    h1#logo {width: 140px;}
    div#loader img {width: 220px;}
#intro {
    padding-bottom: calc(60vw - 20px);
    padding-top: 0;}
.intro_txt_wrap::before {
    width: 36vw;
    height: 13vh;}
#intro .intro_img{
	height: 60vw;
	top: auto;
	bottom: 0;}
	
#top_contents::before {width: calc(100% - 50px);}
#top_contents .con_box_01:before {
    width: 42vw;
    height: 19vh;}
    
#top_contents .con_box_02:before {
    width: 19vw;
    height: 8vh;
    bottom: auto;
    top: 0%;
    right: 0;
    transform: translate(82%, 96%);
    mix-blend-mode: multiply;
    z-index: 1;
    opacity: 0.8;}
    
#top_contents figure {
    border: solid 10px #ffffff;
    box-shadow: 0px 0px 0px 2px #e8f7f4;
    border-radius: 2px;}

#top_contents2 h3.con2_title {text-align: left;}
#intro .intro_txt_wrap {margin: 0px 30px 0;}

#top_contents .con_box .contents_no {
    top: auto;
    left: -4px;
    z-index: 1;
    bottom: 95px;
    mix-blend-mode: multiply;
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
}

#top_contents .con_box .contents_no_02 {
    bottom: 135px;
}
    
section#page_title::before {
    width: 29vw;
    height: 20vh;
    transform: translate(-55%, -23%) rotate(21deg);}
section#page_title {
    padding: 0px 0 0 0;
    margin-bottom: 60px;}

section#page7, section#page9, section#page10 {
    background: rgba(255,255,255,0.6);
    padding: 2%;
    width: 95% !important;
    max-width: 95%;
    min-width: 95%;}
    
#bottom_tel a {
    height: 50px;
}
#bottom_tel {
    left: 0;
    bottom: 0;
    z-index: 3;
    width: calc(100% - 50px);
    max-width: inherit !important;  }  
    
.cms_title::before {
    content: '';
    position: absolute;
    width: 16vw;
    height: 9vh;
    transform: translate(-55%, -30%) rotate(21deg);
    z-index: -2;
    opacity: 0.5;
}


#page_top { z-index: 4;}
}
/*スマホ*/
@media screen and (max-width: 667px){
    div#loader img {width: 180px;}
    html, body {font-size: 15px;}
section#top_contents2::before {
    width: 300px;
    height: 64px;}
.cms_2-c .box_item {padding: 20px;}
.cms_title {margin-bottom: 50px;}
h1#logo {width: 120px;}
#cms_5-c .box_txt1::before {
    top: 7px;
    left: 4px;}
#cms_5-c .box_title1::before {
    top: 3px;
    left: 4px;}
.info_box {text-align: center;}
#intro .intro_txt_wrap {margin: 0px 0px 0px;}


.ribbon13 h3 {
    padding: 0 30px 0 20px;
    font-size: 17px;
    line-height: 50px;
    letter-spacing: 1px;}

#intro h2.intro_title {
    padding: 20px 20px 0;
    font-size: 21px;}

#intro .intro_txt {
    padding: 0px 20px;
    margin-top: 20px;}

html, body {font-size: 13px;}
#intro {
    padding-bottom: calc(60vw - 20px);
    padding-top: 30px;}
.intro_txt_wrap::before {
    width: 46vw;
    height: 17vh;}
#top_contents .con_box_01:before {
    width: 50vw;
    height: 30vh;
    transform: translate(-13%, -1%);}
.con_open h2.intro_title {font-size: 24px;}
#top_contents .con_box_02:before {transform: translate(45%, 306%);}
.cms_title {margin-bottom: 25px;}
.cms_title, #top_cms .more.font_com {margin: 35px 0 20px;}
.cms_box {margin-bottom: 80px;}

#top_cms .cms_wrap {padding: 15px;}
.swiper-button-prev, .swiper-button-next {padding: 0 7px;}

#top_cms .cms_wrap::before {
    width: 94%;
    height: 95%;}
    
.cms_2-a .cate_box {padding: 15px 15px;}
.cms_6-c .cate_box:first-of-type {margin-top: 20px;}
.cms_6-c .cate_box {margin-bottom: 30px !important;}

section#page_title::before {
    width: 44vw;
    height: 17vh;
    transform: translate(-55%, -31%) rotate(21deg);}
#cms_6-c .cate_box {padding: 20px;}

section#page7, section#page9, section#page10 {
    background: rgba(255,255,255,0.6);
    padding: 4%;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    min-width: calc(100% - 40px) !important;}
    
.contents_no_02 {bottom: 96px !important;}
}