@charset"utf-8";
/* CSS Document */
.spNone {
	display: block!important;
}
.pcNone {
	display: none!important;
}
.contents02 {
    padding-top: 100px;
}
.contents02.last {
	padding-bottom: 100px;
} 
h2 {
	margin-top: 40px; 
	margin-bottom: 50px;
}
.last h2 {
	margin-top: 0px; 
}
p.t_txt {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 800;
	font-size: 22px;
	text-align: center;
}
/*---------------------------------------------------
 omatome area
----------------------------------------------------*/
.omatomearea {
    width: 95%;
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
}
p.omatome_txt {
	width: 95%;
	max-width: 1092px;
	margin:0 auto;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 800;
	font-size: 20px;
	text-align: left;
}
p.omatome_txt01 {
	width: 95%;
	max-width: 1092px;
	margin: 15px auto 0;
	font-size: 16px;
	
}
.omatomebox {
    width: 48.5%;
}
.omatomebox p {
	font-size: 19px;
	line-height: 1.3;
}
.omatomebox p span {
	font-size: 22px;
	color: #e2515d;
}
.omatomebox img {
    width: 100%;
    max-width: fit-content;
    margin: 5% auto 0;
}
.indent {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

/*---------------------------------------------------
 template area
----------------------------------------------------*/
.templatearea {
    width: 95%;
    max-width: 1100px;
    margin: 40px auto 0;/*20250604*/
}
.tempbox {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.tempbox img {
	width: 25%;
	max-width: fit-content;
}
/*.templatearea .tempbox {
    width: 48.5%;
	margin-top: 3.5%;
	display: flex;
	justify-content: space-between;
}
.templatearea .tempbox:first-child,.templatearea .tempbox:nth-child(2) {
	margin-top: 0;
}
.templatearea .tempbox:nth-child(2n) {
	margin-left: 2.5%;
}
.tempbox .box_l {
	width: 40%;
	max-width: 220px;
}
.tempbox .box_l img {
	width: 100%;
	border-radius: 8px;
	 box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
.tempbox .box_r {
	width: 55%;
	border-radius: 8px;
	padding: 5%;
	background: #FFFFFF;
	box-sizing: border-box;
	position: relative;
}
.tempbox .box_r::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 26px solid transparent;
	border-bottom: 26px solid transparent;
	border-right: 26px solid #FFFFFF;
	border-left: 0;
	position: absolute;   
	top: 50%;
	left: -26px;
}
.tempbox .box_r .titl {
    font-size: 22px;
    font-weight: 600;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    color: #e2515d;
    margin: 0 auto 10px;
}
.tempbox .box_r .txt {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 20px;
}
.templnk {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.templnk img {
    width: auto;
}
.templnk .arrowbtn a {
	font-size: 15px;
	font-weight: 600;
	color: #e2515d;
	--arrow-color:#e2515d; /* 矢印の色を設定 *
	position: relative; /* 疑似要素を位置指定するための基準 *
	padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） *
	color: var(--arrow-color); /* 文字色を矢印の色と統一 *
	text-decoration: none; /* 下線を非表示 *
}
.templnk .arrowbtn a::before {
	border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 *
	border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 *
	bottom: 0; /* 矢印をボタン下部に配置 *
	content: ''; /* 疑似要素でコンテンツを空に設定 *
	height: 12px; /* 矢印の高さ *
	position: absolute; /* 親要素から相対的に配置 *
	left: 0; /* 矢印の位置を左端に *
	transform: skewX(50deg); /* 矢印の形状を傾けてデザイン *
	width: 100%; /* ボタン全体の幅に矢印を合わせる *
	transition: all .3s; 
}
.templnk .arrowbtn a:hover::before {
	left: 10%; /* ホバー時、矢印が右に10%ずれる *
}
.tempbox.commingsoon {
  position: relative;/*親要素にrelative*
}
.commingsoon p.c_txt{ 
	width: 95%;
    height: 95%;
	/*border: solid 10px #FFF;*
    position: absolute;
    text-align: center;
    align-content: center;
	background-color:rgba(31,31,31,0.77);
    border-radius: 8px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    margin: auto;
    padding: 0;
    z-index: 2;
	box-sizing: border-box;
}
*/
/*---------------------------------------------------
 customize area
----------------------------------------------------*/
.customizearea {
	width: 95%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px;
	border-radius: 8px;
	background: #FFFFFF;
	box-sizing: border-box;
}
.customizearea .txt {
	font-size: 19px;
	line-height: 1.3;
	margin: 0 auto 5%;
}
.customizearea img {
	width: 100%;
	max-width: fit-content;
}



@media screen and (max-width: 960px) {
/*////////////////////////////////////////////////
=pc→spに表示変更
////////////////////////////////////////////////*/
.spNone {
	display: block!important;
}
.pcNone {
	display: none!important;
}
/*---------------------------------------------------
 omatome area
----------------------------------------------------*/


/*---------------------------------------------------
 template area
----------------------------------------------------*/

    
    
    
    
    
    
}
@media screen and (max-width: 767px) {
/*////////////////////////////////////////////////
=pc→spに表示変更
////////////////////////////////////////////////*/
    .spNone {
        display: none!important;
    }
    .pcNone {
        display: block!important;
    }
	.contents02 {
		padding-top: 80px;
	}  
	.contents02.last {
		padding-bottom: 10%;
	}  
	h2 {
		margin-top: 10%;
        margin-bottom: 10%;
    } 
	p.t_txt {
        font-size: 4.5vw;
        padding: 0 2.5%;
    }
/*---------------------------------------------------
 omatome area
----------------------------------------------------*/
	.omatomearea {
		padding: 6%;
		margin: 10vw auto 0;
		flex-wrap: wrap;
	}
	p.omatome_txt {
		font-size: min(4.5vw, 18px);
	}
	p.omatome_txt01 {
		font-size: min(3.8vw, 15px);
		line-height: 1.2;
	}
	.omatomebox {
		width: 100%;
		margin-bottom: 10vw;
	}
	.omatomebox:last-child {
		margin-bottom: 0;
	}
	.omatomebox p {
		font-size: min(5vw, 25px);
	}
	

/*---------------------------------------------------
 template area
----------------------------------------------------*/
	.tempbox img {
		width: 49.5%;
		max-width: fit-content;
	}
	/*.templatearea .tempbox {
        width: 100%;
        margin: 0 auto 10vw;
        display: block;
    }
	.templatearea .tempbox:nth-child(2n) {
		margin-left: 0;
	}
	.tempbox .box_l {
		width: 100%;
		max-width: 201px;
		margin: 0 auto 10vw;
	}
	.tempbox .box_r {
		width: 100%;
	}
	.tempbox .box_r::after {
		border-style: solid;
		border-right: 26px solid transparent;
		border-left: 26px solid transparent;
		border-bottom: 20px solid #FFFFFF;
		border-top: 0;
		top: -20px;
		left: 0;
		right: 0;
		margin: auto;
	}
	.tempbox .box_r .titl {
		font-size: min(5.5vw, 30px);
		margin-bottom: 3vw;
	}
	.templnk .arrowbtn a {
		font-size: min(4.8vw, 18px);
		padding-bottom: 0.2em;
	}
	.commingsoon p.c_txt {
		width: 100%;
		height: 100%;}*/
/*---------------------------------------------------
 customize area
----------------------------------------------------*/	
	.customizearea {
		padding: 4%;
	}
	.customizearea .txt {
		font-size: min(5vw, 25px);
	}
	
	
}