@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

body {
    line-height: 1.7;
}
#contents {
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/graphcoders-lil-fiber.png");
}
.loader_txt, .cms_title h2, #catch h2, #question h2, #contents h2, #contents .box h3, #top_cms .cms_title h2, #page_title h2 {
    /* font-family: 'Noto Sans JP', sans-serif; */
    letter-spacing: 0.12rem;
}
.title .title_dec {
    text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;
    color: #ff9a31;
}
.illust1 {
    width: 157px;
    bottom: -126px;
    left: -15px;
}
.illust2 {
    width: 157px;
    top: -20px;
    right: 5%;
}
#contents .box .box_item {
    position: relative;
    background: #f4f5e1;
    /* z-index: 9999; */
}
#contents .box .box_item:before {
    content: "";
    display: block;
    background-color: #ffffff;
    left: -5px;
    top: 4px;
    width: calc(100%);
    height: 99%;
    /* transform: rotate(-1deg); */
    position: absolute;
    border: 0;
    box-shadow: 3.863px 7.596px 14px 0px rgb(0 0 0 / 6%);
    z-index: -1;
}
#contents .box .box_item:after {
    content: "";
    display: block;
    background-image: url(../Dup/img/clip.png);
    right: 26px;
    top: -13px;
    width: 27px;
    height: 57px;
    transform: rotate(0deg);
    position: absolute;
    border: 0;
    background-size: contain;
    background-repeat: no-repeat;
}
#contents .box.con2 .box_item:after {
    content: "";
    display: block;
    background-image: url(../Dup/img/husen.png);
    right: -36px;
    top: 25px;
    width: 120px;
    height: 71px;
    transform: rotate(0deg);
    position: absolute;
    border: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -2;
}
.cate .cate_title {
    background: linear-gradient(transparent 60%, #ff6 60%);
    display: inline-block;
    border: 0;
}
.top_cms_box.cms1 .top_cms_box_wrap {
    background-image: linear-gradient(0deg, transparent 23px, #e5e5e5 24px), linear-gradient(90deg,  transparent 23px, #ebebeb 24px);
    background-size: 24px 24px;
}
.catch {
    font-size: 36px;
    background: #fff;
    padding: 7px 20px;
    font-weight: bold;
    right: 5%;
    bottom: 24%;
    z-index: 1;
    color: #f17550;
}
.catch span {
    font-size: 16px;color: #858585;
}
.button_container span {
    height: 2px;
}
#page_title .marker {
    background: transparent;
    background-image: url(Dup/img/pagetitle.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 100% 100%;
    padding: 0px 58px 10px 5px;
    margin-left: 50px;
}
.top_cms_box {
    position: relative;
}
.top_cms_box.cms1 .sub_title {
    position: absolute;
    left: -44px;
    top: -13px;
}
#cms_2-h .cate_box {
    margin-top: 50px;
}
.flow_type3 .cate {
    border-radius: 20px;
    padding: 20px 20px;
    margin-bottom: 20px;
    border: 1px solid #cfcfcf;
}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: #ebebeb;
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}
@media screen and (max-width: 768px){
.top_cms_box.cms1 .sub_title {
    left: -15px;
}
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.top_cms_box.cms1 .sub_title {
    position: initial;
}
#page_title .marker {
    padding: 0px 43px 7px 5px;
    margin-left: 47px;
}
footer .sns_link li a {
    padding-top: 10px;
    padding-bottom: 10px;
}
#contents .box .box_item {
    padding: 50px 17px;
    width: 100%!important;
    margin-left: 0%;
}
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 0px;
}
}
@media screen and (max-width:667px){
html {
    font-size: 15px;
}
.f_link {
    padding-top: 70px;
}
.catch {
    font-size: 21px;
    right: 0%;
    bottom: 7%;
}
.catch span {
    font-size: 11px;
    text-align: right;
    opacity: 0.9;
}
.illust1 {
    width: 107px;
    bottom: -86px;
}
.illust2 {
    width: 107px;
    top: -20px;
}
#cms_2-h .box_txt1.pd_t-50px_sp {
    padding-top: 35px;
}
#cms_2-h .box_title1:before {
   
    bottom: -17px;
}
}
/*2023/01/04*/
.bg_color3 {
    background-color: #ddd600;
}
.txt_color3 {
    color: #ddd600;
}