@charset "UTF-8";
/*
    Template: swell
    Theme Name: ichikawa-wash
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/*------------------------------------------------------*/

@import url("./css/page.css");


@media screen and (min-width:641px){.smp{display: none!important;}}
@media screen and (max-width:640px){.pc{display: none!important;}}



@media screen and (max-width:641px){
	.pc{display: none!important;}
	.tablet{display: none!important;} 
}
@media screen and (min-width:641px) and (max-width:1024px){
	.pc{display: none!important;} 
	.smp{display: none!important;}
	
	.sp_{display: none;}
}



*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.cf:before,.cf:after{content:"";display:block;overflow:hidden;}
.cf:after{clear:both;}
.cf{zoom:1;}





/*	body
------------------------------------------------------*/
.awa01{position: absolute; right: -73px; top: 22%; z-index: 2; width: 200px;}
.awa02{position: absolute; right: -129px; top: 30%; z-index: 2;}
.awa03{position: absolute; left: -45px; top: 33%;}
.awa04{position: absolute; right: -129px; top: 71%; z-index: 2;}
.awa05{position: absolute; left: -147px; top: 83%; z-index: 2;}
.awa06{position: absolute; right: -129px; top: 87%; z-index: 2;}
.awa07{position: absolute; left: -189px; top: 97%; z-index: 2;}

@media screen and (min-width:641px) and (max-width:1024px){
	.awa01 {top: 23%;  width: 150px;}
	.awa04 {
		right: -19px;
  		top: 74%;
  		width: 130px;
        z-index: 1;
	}
	.top-about .charactor01 {top: -190px!important; right: 18px!important;}
	.top-about .charactor01 img {width: 20vw!important;}
}

@media screen and (max-width:641px){
	.awa01 {top: 21%; width: 117px; z-index: 1;}
    .awa02{z-index: 1;}
	.awa04 {top: 70%; right: 0; width: 80px; z-index: 1;}
    .awa05{z-index: 1;}
    .awa06{z-index: 1;}
    .awa07{z-index: 1;}
}
/*	header
------------------------------------------------------*/
.l-header__bar{display: none;}
.l-header {
  	box-shadow: 0 3px 6px rgba(0,0,0,.16);
  	width: 90%;
  	margin: 0 auto;
	border-radius: 50px;
	top: 25px;
}
.l-header__inner {padding: 5px 0;}
.l-header__logo{margin-left: 25px;}

.c-gnav > .menu-item{font-weight: bold;}
.c-gnav > .menu-item:first-child{display: none;}
.c-gnav > .menu-item:last-child a .ttl{
	color: #fff;
	background: #0062AC;
	font-weight: bold;
	padding: 10px 16px;
  	border-radius: 50px;
}
.c-gnav > .menu-item:last-child a::after{
	background: none;
}

/* ヘッダーのc-naviメニューのカテゴリーアクティブスタイル */
.c-gnav .active-cat-underline > a::after {
     background: var(--color_main);
	width: 100%;
  	height: 2px;
  	transform: scaleX(1);
}


/* ヘッダーのc-naviメニューのカテゴリーアクティブスタイル */
.c-gnav .active-category-underline > a::after {
     background: var(--color_main);
	width: 100%;
  	height: 2px;
  	transform: scaleX(1);
}

/* ヘッダーのc-naviメニューのWorksアクティブスタイル */
.c-gnav .active-works-underline > a::after {
     background: var(--color_main);
	width: 100%;
  	height: 2px;
  	transform: scaleX(1);
}



@media screen and (min-width:641px) and (max-width:1024px){
	.l-header{width: 95%; margin-top: 20px;}
	.l-header__inner {padding: 11px 0;}
	.l-header__menuBtn{display: block; margin-right: 14px;}
	.c-headLogo {height: 60px;  }
	.c-iconBtn__icon {font-size: 31px;}
	
	.p-spMenu__inner{padding-top: 7em;}
	.p-spMenu__inner::before {background: #0062ac;}
	.c-widget__title{display: none;}
	.c-listMenu a {color: #fff; padding: 1.2em 1em 1.2em 2em;}
	.c-gnav .sub-menu a::before, .c-listMenu a::before {color: #fff;}
	.p-spMenu__closeBtn .c-iconBtn__icon {color: #fff;}

}
@media screen and (max-width:641px){
	.l-header{
		margin: 12px auto 0;
    	width: 97%;
	}
	.l-header__menuBtn {margin-right: 10px;}
	.c-iconBtn__icon {font-size: 30px;}
	.p-spMenu__inner{padding-top: 7em;}
	.p-spMenu__inner::before {background: #0062ac;}
	.c-widget__title{display: none;}
	.c-listMenu a {color: #fff; padding: 1.2em 1em 1.2em 2em;}
	.c-gnav .sub-menu a::before, .c-listMenu a::before {color: #fff;}
	.p-spMenu__closeBtn .c-iconBtn__icon {color: #fff;}
}

/*	footer
------------------------------------------------------*/
.pankuzu{
	max-width: 1200px;
	margin: 0 auto;
	
}
.pankuzu ol{
	display: flex;
	justify-content: center;
	padding: 6px 0;
}
.pankuzu ol li{
	background: #fff;
	border: 2px solid #000;
  	border-radius: 15px;
	font-size: 13px;
	position: relative;
	margin-right: 3%;
	padding: 0 19px;
}
.pankuzu ol li:first-child{
	color: #fff;
	background: #0062AC;
 	border: 2px solid #000;
  	border-radius: 15px;
}
.pankuzu ol li:first-child a{
	color: #fff;
}
.pankuzu ol li:last-child{
	margin-right: 0;
}
.pankuzu ol li a{
	color: #000;
	font-size: 13px;
}

.pankuzu ol li::before{
	content: '›';
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  font-size: 1.5em;
  color: #000;
  position: absolute;
  top: 43%;
  right: -29px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.pankuzu ol li:last-child::before{
	content: none;
}

.copyright{display: none;}

.l-footer{
	background-image: url("img/bg-dot2.png");
	background-color: #0062AC;
	color: #fff;
	padding: 200px 0 30px;
	margin-top: 25em;
	
}
.f-area{
	max-width: 1200px;
  	margin: 0 auto;
	padding: 80px 0 152px;
	z-index: 2;
  	position: relative;
}
.f-area .left{
	float: left;
	width: 50%;
}
.f-area .right{
	float: right;
	width: 50%;
	padding-top: 20px;
}
.f-area .siteName{
	font-size: clamp(20px,2.0vw,30px);
	font-weight: bold;
}
.f-area .comName{
	font-size: 21px;
	padding: 25px 0 7px;
}
.f-area ul{
	display: inline-block;
	width: 45%;
	vertical-align: top;  	
}
.f-area ul li{
	margin-bottom: 12px;
}
.copy{
	text-align: center;
	font-size: 14px;
}

.f-contact{
	width: 75%;
	margin: 0 auto;
	border: 10px solid #000;
	text-align: center;
	color: #000;
	background: #fff;
	padding: 40px 10px;
	position: absolute;
  top: -55px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.f-contact .ttl{
	font-family: "Mochiy Pop One", sans-serif;
	font-size: clamp(30px,3.0vw,40px);
	letter-spacing: 6px;
}
.f-contact .txt{
	font-size: 25px;
	letter-spacing: 2px;
	padding-top: 13px;
}
.f-contact .tel a{
	font-size: clamp(50px,5.0vw,70px);
	font-weight: bold;
}
.f-contact .tel i{
	font-size: 44px;
  	margin-right: 19px;
}
.f-contact .time{
	font-size: 22px;
	letter-spacing: 2px;
	padding: 5px 0 30px;
}
.f-contact .mail{
	position: absolute;
	bottom: -86px;
  	left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
}
.f-contact .mail a{
	font-size: clamp(20px,2.0vw,30px);
  	font-weight: bold;
  	width: 530px;
  	border: 5px solid #000;
  	background: #FFF80C;
  	border-radius: 50px;
  	padding: 14px 10px;
  	display: block;
}
.f-contact .mail i{
	font-size: 40px;
	margin-right: 15px;
	vertical-align: bottom;
}
.btm_bubble{
	position: absolute;
	bottom: 0;
}


@media screen and (min-width:641px) and (max-width:1024px){
	.pankuzu {max-width: 90%;}
	.pankuzu ol li {margin-right: 4%;}
	.pankuzu ol li::before{right: -24px;}
	
	.l-footer {margin-top: 19em; margin-bottom: 38px; background-size: contain;}
	.f-contact {width: 85%;}
	.f-contact .mail {bottom: -75px;}
	.f-contact .mail a{padding: 16px 10px;}
	.f-contact .mail i {font-size: 31px;}
	.f-area {padding: 51px 5% 68px;}
	.f-area .left {width: 40%;}
	.f-area .right {width: 55%;}
	.f-area .comName {font-size: 16px;}
	.f-area .add {font-size: 14px;}
	.f-area ul li a{font-size: 13px;}
	.copy {font-size: 11px;}
	
	#fix_bottom_menu .menu_list {
    	padding: 0;
    	height: 65px;
  	}
	#fix_bottom_menu .menu-item {
    	border-top: 1px solid #fff;
    	border-right: 1px solid #fff;
    	height: 100%;
  	}
	 #fix_bottom_menu .menu-item a {
    	height: 100%;
    	padding-top: 15px;
  	}
}

@media screen and (max-width:641px){
	.pankuzu {max-width: 90%;}
	.pankuzu ol li{font-size: 12px; margin-right: 7%; padding: 1px 13px;}
	.pankuzu ol li a{font-size: 12px;}
	.pankuzu ol li::before{top: 38%; right: -24px;}
	
	
	
	.l-footer{
		margin-top: 18em;
		background-size: contain;
		padding: 69px 0 10px;
		margin-bottom: 35px;
	}
	.f-contact {width: 90%; padding: 29px 10px 40px; border: 7px solid #000;}
	.f-contact .ttl {font-size: 25px;}
	.f-contact .txt {font-size: 16px; letter-spacing: 0px}
	.f-contact .tel a {font-size: 29px;}
	.f-contact .tel i {
  		font-size: 25px;
  		margin-right: 12px;
	}
	.f-contact .time {
		font-size: 16px;
		padding: 5px 0 10px;
	}
	.f-contact .mail {
    	bottom: -70px;
  	}
	.f-contact .mail a {
  		font-size: 16px;
    	width: 293px;
	}
	.f-contact .mail i {
  		font-size: 20px;
  		margin-right: 8px;
  	}
	.f-area {
   		padding: 80px 5% 53px;
	}
	.f-area .left {
  		float: none;
  		width: 100%;
	}
	.f-area .right {
  		float: none;
  		width: 100%;
  		padding-top: 20px;
		display: none;
	}
	.f-area .siteName {
  		font-size: 18px;
  	}
	.f-area .comName {
  		font-size: 15px;
  		padding: 18px 0 7px;
	}
	.f-area .add{font-size: 14px;}
	.copy {font-size: 9px;}
	
	#fix_bottom_menu .menu_list{
		padding: 0;
		height: 55px;
	}
	#fix_bottom_menu .menu-item{
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		height: 100%;
	}
	#fix_bottom_menu .menu-item:last-child{
		border-right: none;
	}
	#fix_bottom_menu .menu-item a{
		height: 100%;
		padding-top: 10px;
	}
}
/*	mainimg
------------------------------------------------------*/
.p-mainVisual{margin-top: -100px;}

@media screen and (max-width:641px){
	.p-mainVisual{margin-top: -86px;}
}

/*	TOP
------------------------------------------------------*/
.top #content {padding-top: 0;}
.top .l-content {margin: -2em auto 6em;}

/*
.top-news{
	padding: 40px 50px;
	border: 5px solid #000;
	border-radius: 20px;
  	background: #fff;
  	box-shadow: 7px 7px 0 #000;
}
.top-news .ttl-area{padding-top: 30px;}
.top-news .ttl-area a{padding: 0.75em 2.5em}
.top-news .linkBtn-sp{display: none;}

.h2-news{
	font-size: clamp(30px,3.0vw,40px)!important;
	margin: 0 0 0.8em!important;
}

.top-news .post-box ul{border-top: none;}
.top-news .post-box ul a{
	border-bottom: 1px dashed #333;
	padding: 17px 15px;
}
.top-news .p-postList__meta{
	display: inline-block; 
	width: 20%;
	margin: 0 30px 0 0; 
	font-size: 13px; 
	color: #333;
	vertical-align: top;	
}
.top-news .p-postList__meta ::before{display: none;}
.top-news .p-postList__title{display: inline-block; width: 68%;}
*/

.towa-box{
	background: #fff;
  	padding: 2em 2em;
  	border: 6px solid #000;
}
.h2-towa{
	font-family: "Murecho", sans-serif;
	font-size: clamp(35px,3.5vw,45px)!important;
  	font-weight: 700 !important;
	margin: 0 auto 0.8em !important;
}
.towa-box .txt{font-size: 23px;}
.towa-box .txt .swl-inline-color{font-size: 30px; letter-spacing: 2px; margin: 0 10px;}



.top-works .l-article{max-width: none;}
.top-works .swell-block-fullWide__inner{
	padding: 0 0 100px;
	width: 100%; /* 幅はお好みに調整してください */
  	background-color: #fff80c; /* 画像に近い青色。お好みの色に調整してください */
  /*
    clip-path: polygon(x1 y1, x2 y2, x3 y3, x4 y4, ...);
    要素の左上を原点(0% 0%)、右下を(100% 100%)として、
    多角形の頂点を時計回りに指定します。
    以下の座標は画像のような形状を作るための一例です。
    P1 (左上): 0% 10%   (左端、上から10%の位置)
    P2 (右上): 100% 0%  (右端、一番上)
    P3 (右下): 100% 90% (右端、上から90%の位置)
    P4 (左下): 0% 100% (左端、一番下)
  */
  clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0% 100%);
  /* 古いブラウザ向けのベンダープレフィックス */
  -webkit-clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0% 100%);
}

.h2-works{
	font-size: clamp(35px,3.5vw,45px)!important;
	padding-top: 2.5em !important;
}

.btn-yellow a{color: #fff; background: #0062ac;}


@media screen and (max-width:641px){
    .top-works .swell-block-fullWide__inner{padding: 0 0 70px;}
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   	margin:0 auto;
	padding-left: 0!important;
}
.slider .case-ttl{
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 12px;
}
.slider .photo{
	display: inline-block;
  	width: 47%;
  	margin-right: 3%;
}
.slider .photo:last-child{
	margin-right: 0;
}
.slider img {
}

.slider .text{
	text-align: center;
	font-weight: bold;
  	padding-top: 7px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
	border: 4px solid #000;
	background: #fff;
    margin:0 10px;
	padding: 20px 20px 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin: 20px 0 30px;
}

.slick-dots li {
    display:inline-block;
	margin:0 9px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 12px;/*ドットボタンのサイズ*/
    height: 12px;/*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #ccc;/*ドットボタンの色*/
	padding: 0;
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
ここまで
===================================*/


.top-about{
	position: relative;
	background-position: bottom!important;
  	background-size: auto!important;
}
.top-about .ttl-area{position: relative;}
.top-about .left-illust{position: absolute; top: 0 ; left: 150px;}
.top-about .right-illust{position: absolute; top: 0 ; right: 150px;}



@media screen and (max-width: 641px) {
    .top-about .charactor01{top: -150px;}
    .top-about .charactor01 img{width: 12vw;}
}

.h2-about{
	font-family: "Mochiy Pop One", sans-serif;
	font-size: clamp(35px,3.5vw,45px)!important;
	margin: 0 0 2em!important;
}
.four-block .swell-block-column{
	padding: 44px 30px;
	border: 5px solid #000;
	border-radius: 20px;
  	background: #fff;
  	box-shadow: 7px 7px 0 #000;
}
.four-block .ttl{
	font-family: "Mochiy Pop One", sans-serif;
	font-size: clamp(28px,2.8vw,36px)!important;
    line-height: 1.5em;
}
.four-block .txt{
	font-size: 20px;
}
.four-block .swl-marker{
	color: #0062AC;
	font-size: 22px;
}

.top-yogore{
	background-image: url("img/bg-dot2.png");
	background-color: #0062AC;
	position: relative;
}
.top-yogore .baloon01{
	position: absolute;
	top: -52px;
	left: 50%;
	transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.h2-yogore{
	font-family: "Mochiy Pop One", sans-serif;
	font-size: clamp(35px,3.5vw,50px)!important;
	margin: 0.5em 0 1em!important;
	padding-top: 34px !important;
}

.e-outer{
    display: flex;
   flex-wrap: wrap;
    gap: 10px; /* 要素間の隙間 */
}
.example{
    width: 48.5%;
    background: #fff;
    padding: 2em 1.5em 1.0em;
    border: 5px solid #000;
}
.example:nth-child(2n){
    margin-right: 0;
}
.example .type, .example .type02, .example .type03{
    text-align: center;
    background: #0062ac;
    color: #fff;
    font-weight: bold;
    width: 40%;
    margin: 10px auto 19px;
    padding: 1px 5px;    
    border-radius: 20px;
}
.example .type02{margin: 10px auto 10px;}
.example .type03{margin: 10px auto 47px;}

.example .price{
    text-align: center;
    padding-bottom: 8px;
    font-weight: bold;
    color: #f00;
}
.example ul{
    display: flex;
    padding: 0;
    list-style: none;
}
.example ul li{
    margin-right: 5%;
    position: relative;
}
.example ul li:last-child{
    margin-right: 0;
}
.example .baloon-b, .example .baloon-a{
    width: 100px;
    position: absolute;
    top: -61px;
}
.example .baloon-b{left: -14px;}
.example .baloon-a{right: -14px;}


.top-tokucho{position: relative;}
.h2-tokucho{
	font-family: "Mochiy Pop One", sans-serif;
	font-size: clamp(35px,3.5vw,45px)!important;
	margin: 0!important;
}

.top-tokucho .sub-txt{
	font-size: 25px;
}
.tokucho-box{
	border: 5px solid #000;
	border-radius: 20px;
	position: relative;
	margin: 0 auto 3em;
  	width: 90%;
}
.tokucho-box .cap_box_ttl{
	font-size: clamp(30px,3.0vw,40px);
	color: #FFF80C;
	border-bottom: 5px solid #000;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	z-index: -1;
	justify-content: left;
  	padding-left: 220px;
}
.tokucho-box .cap_box_content{
	background: #fff;
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
	font-size: 19px;
	padding: 1.5em 2.5em;
}
.tokucho-box .cap_box_content p{
	margin-bottom: 0;
}
.tokucho-box .icon-num{
	position: absolute;
	top: -130px;
  	left: 30px;
}

.btn-blue a{
	width: 550px;
	padding: 20px 10px;
	border: 4px solid #000;
	font-size: 19px;
}

.top-tokucho .charactor02{
	position: absolute;
	top: -123px;
	left: 10px;
}


.h2-price{
	font-family: "Murecho", sans-serif;
  	font-size: clamp(35px,3.5vw,45px) !important;
  	font-weight: 700 !important;
	margin-bottom: 1em !important;
    letter-spacing: 10px !important;
}
.top-price .illust-pc{
    text-align: center;
}
.top-price .illust-sp{
    display: none;
}
.top-price .price-outer{
    background: #fff;
    padding: 3em 3em;
    border-radius: 20px;
    border: 4px solid #000;
}
.top-price .box{
    background: #e1f0fc;
    margin: 2em;
    padding: 2.5em 1em;
    border-radius: 20px;
}
.top-price .box:last-child{
    display: none;
}
.top-price .box .left{
    float: left;
    width: 34%;
    border-right: 3px dotted #000;
    line-height: 60px;
}
.top-price .box .right{
    float: right;
    width: 63%;
}
.top-price .box .left p{
    text-align: center;
    font-size: 15px;
}
.top-price .box .ttl{
    color: #fff;
  background: #0062ac;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  width: 85%;
  margin: 10px auto;
    margin-bottom: 10px;
  border-radius: 30px;
}
.top-price .box .price{
    font-family: "Murecho", sans-serif;
  	font-size: clamp(40px,4.0vw,50px);
  	font-weight: 700 ;
    color: #0062ac;
    line-height: 1.5em;
}
.top-price .box .sml-m{
    font-size: 30px;
    margin-left: 2px;
}
.top-price .box .note{
    color: #000;
}
.top-price .box .type{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
}
.top-price .box .type li{
    background: #fff80c;
    color: #000;
    border-radius: 20px;
    margin-right: 2%;
  padding: 2px 13px;
  font-size: 15px;
}



.top-process .ttl-box{position: relative;}
.h2-process{
	font-family: "Murecho", sans-serif;
  	font-size: clamp(35px,3.5vw,45px) !important;
  	font-weight: 700 !important;
	margin-top: 0 !important;
}
.balloon{
  	position: absolute;
  	display: inline-block;
  	margin: 1.5em 0;
 	padding: 10px 39px;
  	color: #fff;
  	font-size: 20px;
	font-weight: bold;
  	background: #0062ac;
	border-radius: 30px;
	top: -54px;
  	left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #0062ac;
}

.process-box{
	width: 80%;
	margin: 0 auto 3em;
}
.process-box .cap_box_content{
	background: #fff;
	border: 4px solid #000;
	padding: 3em 2em 3em;
    border-radius: 20px;
    box-shadow: 7px 7px 0 #000;
}
.process-box .cap_box_ttl{
    display: block;
    width: 50%;
	font-size: 25px;
	font-weight: bold;
	border-radius: 30px;
  	padding: 14px 45px;
	border: 3px solid #000;
    box-shadow: 5px 5px 0 #000;
	top: 74px;
	left: 50%;
	transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

.process-box .cap_box_ttl .step{
    display: block;
	font-size: 18px;
    margin-bottom: 10px;
    color: #fff80c;
}

.process-box .cap_box_content .txt02{padding-top: 20px;}

.con-box{padding: 15px 0;}
.con-box .typeBox{
	background: #f1f1f1;
    padding: 1.5em 2em;
    text-align: center;
    border-radius: 10px;
    height: 204px;
}
.con-box .type{
    font-size: 21px;
    font-weight: bold;
    background: #000;
    color: #fff;
    border-radius: 10px;
    padding: 10px 0;
    margin-bottom: 15px;
}

.con-box .text01{}
.con-box .text01 .tel{
    font-size: 35px;
    font-weight: bold;
    color: #0062ac;
}
.con-box .text01 i{margin-right: 10px;}
.con-box .time{
    padding-top: 8px;
    font-size: 15px;
}
.con-box .text02{line-height: 1.8em;}
.con-box .text02 a{
    font-size: 18px;
    font-weight: bold;
    color: #0062ac;
}
.con-box .text02 .uline{
    font-weight: bold;
    background: linear-gradient(transparent 64%,var(--color_mark_yellow) 0%);
}
.line-bnr-sp{display: none;}

.top-contact{}
.h2-contact{
    font-family: "Murecho", sans-serif;
    font-size: clamp(35px,3.5vw,45px) !important;
    font-weight: 700 !important;
    margin: 0 auto 0.8em !important;
    position: relative!important;
}
.h2-contact::after{
    content: '' !important;
  display: inline-block !important;
  width: 80px !important;
  height: 80px !important;
  background-image: url("img/icon-sphone-w.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle !important;
  position: absolute;
  right: 196px;
  top: -23px;
  transform: rotate(17deg);
}

.con-box02{padding: 15px 0;}
.con-box02 .typeBox{
	background: #fff;
    padding: 1.5em 2em;
    text-align: center;
    border-radius: 10px;
    border: 3px solid #000;
    box-shadow: 5px 5px 0 #000;
}
.con-box02 .type{
    font-size: 21px;
    font-weight: bold;
    background: #000;
    color: #fff;
    border-radius: 10px;
    padding: 10px 0;
    margin-bottom: 15px;
}

.con-box02 .text01{}
.con-box02 .text01 .tel{
    font-size: clamp(30px,3.0vw,40px);
    font-weight: bold;
    color: #0062ac;
}
.con-box02 .text01 i{margin-right: 10px;}
.con-box02 .time{
    padding-top: 8px;
    font-size: 15px;
}
.con-box02 .text02{line-height: 1.8em;}
.con-box02 .text02 a{
    font-size: 22px;
    font-weight: bold;
    color: #0062ac;
}
.con-box02 .text02 .uline{
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(transparent 64%,var(--color_mark_yellow) 0%);
}

.h2-unei{
    font-family: "Murecho", sans-serif;
    font-size: clamp(35px,3.5vw,45px) !important;
    font-weight: 700 !important;
    margin: 0 auto 0.8em !important;
    letter-spacing: 4px !important;
    position: relative!important;
}
.top-detail{
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	border-radius: 20px;
  	background: #fff;
	width: 85%;
	margin: 0 auto;
	padding: 27px 5% 62px;	
}

.top-detail table tr{border-bottom: 2px dotted #000;}
.top-detail table th, .top-detail table td{height: 90px; line-height: 1.5em;}
.top-detail table th{width: 24%;}


@media screen and (min-width:641px) and (max-width:1024px){
	/*
	.top-news .ttl-area {padding-top: 0;}
	.h2-news{display: inline-block; width: 60%;}
	.top-news .swell-block-button{display: inline-block;}
	.top-news .linkBtn-sp{display: none;}
	*/
	.top-about{padding-bottom: 8em !important;}
	.top-about .left-illust {left: 34px; width: 50px;}
	.top-about .right-illust {right: 34px; width: 50px;}
	
	.four-block .swell-block-column {padding: 37px 20px;}
	.four-block .ttl {font-size: 23px !important;}
	.four-block .txt {font-size: 17px;}
	.four-block .swl-marker {font-size: 19px;}
	
    .top-towa .swell-block-fullWide__inner{padding-bottom: 7em !important;}
    
    .example{width: 48.4%; padding: 1.5em 1.5em 1.0em;}
    .example .type, .example .type02, .example .type03{width: 67%; font-size: 14px;}
    .example .price{line-height: 1.6em;}
    .example .price .smp{display: block!important; }
    .example .baloon-b, .example .baloon-a {width: 77px; top: -52px;}
    
    
    
	
	.top-tokucho .charactor02 {top: -115px; left: 23px; width: 140px;}
	.top-tokucho .sub-txt {font-size: 20px;}
	.tokucho-box .icon-num {top: -104px; width: 130px;}
	.tokucho-box .cap_box_ttl {padding-left: 180px;}
    
    .top-price .price-outer{padding: 3em 1.5em;}
    .top-price .box{margin: 2em 0;}
    .top-price .box .left{line-height: 2; width: 37%; padding-right: 12px; }
    .top-price .box .ttl{font-size: 19px; width: 90%;}
    .top-price .box .right {width: 60%;}
    .top-price .box .type li{font-size: 13px;}
    
    .balloon{width: 55%; text-align: center; top: -43px;}
    .process-box {width: 95%;}
    .process-box .cap_box_ttl{width: 60%; top: 87px; padding: 14px 15px;}
    .process-box .txt01{padding-top: 20px;}
    
    .h2-contact::after{right: 46px;}
    
    .top-detail{width: 95%;}
}

@media screen and (max-width:641px){
	.top .l-content {
  		margin: -0.1em auto 6em;
	}
	/*
	.top-news {padding: 30px 26px 40px; box-shadow: 4px 5px 0 #000;	position: relative;}
	.h2-news {margin: 0!important;}
	.top-news .ttl-area {padding-top: 7px;}
	.top-news .linkBtn-pc{display: none;}
	.top-news .linkBtn-sp{display: block; margin-top: 40px;}
	.top-news .linkBtn-sp a{width: 280px;}
	.top-news .post-box ul a {padding: 17px 9px;}
	.top-news .p-postList__meta {display: block; margin: 0 0 4px;}
	.top-news .p-postList__title {display: block; font-size: 15px;}
	*/
	
	.top-towa{padding-bottom: 2em!important;}
	.towa-box {padding: 2em 1em;}
	.h2-towa{font-size: 29px !important;}
	.towa-box .txt {font-size: 20px;}
	.towa-box .txt .swl-inline-color {font-size: 26px; margin: 0;}
	
    .example {display: block; width: 100%; margin-right: 0; padding: 1.5em 1em 1.0em;}
    .example .type, .example .type02, .example .type03{width: 65%; font-size: 15px; margin: 10px auto 14px;}
    .example .price{line-height: 1.8em;}
    .example .baloon-b, .example .baloon-a {width: 70px; top: -53px;}
    
    
    
	.h2-works {
    	font-size: 30px !important;
    	padding-top: 2em !important;
        padding-bottom: 10px!important;
	}
	
	
	/*スライダー*/
	.slider .slick-slide {padding: 20px 13px 10px;}
	.slider .photo {width: 47.9%;}
	.slider .text {font-size: 14px;}
	
	.top-about .charactor01 {right: 16px;}
	.top-about .charactor01 img {width: 105px;}
	
	.h2-about {font-size: 20px !important;}
	
	.top-about .left-illust {
		top: 9px;
    	left: -12px;
  		width: 32px;
	}
	.top-about .right-illust {
		top: 9px;
  		right: -12px;
		width: 32px;
	}
	.four-block .swell-block-column {padding: 27px 15px; box-shadow: 4px 5px 0 #000;}
	.four-block .txt {font-size: 17px;}
	.four-block .swl-marker {font-size: 18px;}
	
	.top-yogore {
		margin-top: 4em !important;
		background-size: contain;
        padding-bottom: 3em !important;
	}
	.top-yogore .baloon01 img{width: 115px!important;}
	.h2-yogore {font-size: 25px !important;}
	
	.baloon-b {
  		left: -10px;
  		top: -60px;
  		width: 79px;
	}
	.baloon-a {
    	right: -10px;
  		top: -60px;
  		width: 79px;
	}
	.txt-y {font-size: 16px;}
	.yogore-arrow-y img{width: 25px!important;}	
	.compare-box p{font-size: 14px;}
	
	.top-tokucho{padding-bottom: 1em !important;}
	.top-tokucho .charactor02 {
    	top: -101px;
  		width: 85px;
	}
	.h2-tokucho {font-size: 22px !important;}
	.three-tokucho img{width: 230px;}
	.top-tokucho .sub-txt {font-size: 17px;}
	
	.tokucho-box {width: 100%;}
	.tokucho-box .icon-num {
		top: -81px;
  		left: 0;
  		width: 100px;
	}
	.tokucho-box .cap_box_ttl {
  		font-size: 25px; 
  		padding: 10px 0 10px 110px;
	}
	.tokucho-box .cap_box_content {
    	font-size: 16px;
  		padding: 1.0em 1.0em;
	}
	.btn-blue a {
  		width: 90%;
		padding: 12px 10px;
		font-size: 16px;
	}
    
    .top-price .illust-pc{display: none;}
    .top-price .illust-sp{display: block;}
    .top-price .price-outer {
        background: #fff;
        padding: 2em 1.5em;
    }
    .top-price .box {
        margin: 2em 0; 
        padding: 2em 1em;
    }
    .top-price .box .left {
        float: none; 
        width: 100%; 
        border-bottom: 3px dotted #000;
        border-right: none;
        padding-bottom: 30px;
        line-height: 2;
    }
    .top-price .box .right {
        float: none; 
        width: 100%;
        padding-top: 10px;
    }
    
    .top-price .box .left p {font-size: 14px;}
    .top-price .box .ttl {
        font-size: 22px;
        width: 100%;
    }
    .top-price .box .price {text-align: center;}
    .top-price .box .note {font-size: 14px;}

.top-detail{
	width: 100%;
	padding: 20px 5% 55px;	
    font-size: 90%;
    }    
    
    
    .balloon{width: 80%; font-size: 14px; top: -38px; text-align: center;}
    .h2-process{font-size: 30px!important;}
    .process-box {width: 100%; margin: 0 auto 2em;}
    .process-box .cap_box_content {padding: 3em 1em 2em;}
    .process-box .cap_box_ttl {font-size: 17px; padding: 10px 15px 11px; width: 80%; top: 66px;}
	.process-box .cap_box_ttl .step {font-size: 15px;margin-bottom: 8px;}
    .con-box .typeBox {height: auto;}
    .con-box .type {font-size: 16px;}
    .con-box .text01 .tel {font-size: 28px;}
    .process-box .cap_box_content .txt02 {padding-top: 0;}
    
    .line-bnr-pc{display: none;}
    .line-bnr-sp{display: block;}
    
    .h2-contact{font-size: 26px !important;}
    .h2-contact::after {
          width: 50px !important;
          height: 50px !important;
          right: 0;
          top: -48px;
          transform: rotate(17deg);
    }
    .con-box02{margin-bottom: 1em;}
    .con-box02 .text02 a {font-size: 20px;}
    .con-box02 .text02 .uline {font-size: 17px;}
}