@charset "UTF-8";
/* CSS Document */

.main-content {
	background-color: #fff;
	padding-bottom: 80px;
}

.cp-term-box {
	text-align: center;
	padding: 8px;
	background-color: #058b3e;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

/* title */
.title img{
	display:block;
	margin: auto;
	width:100%;
	max-width: 1000px;
}

.title-wrapper {
	background-color: #a7b4c1;
}

.title-sub-wrapper {
	text-align: center;
}

.title-sub-wrapper img {
	width: 1000px;
	margin: 0 auto;
	aspect-ratio: 125/31;
}

.lead {
	padding-top: 18px;
	padding-bottom: 18px;

}

.title-sub {
	font-size: 14px;
	box-sizing: border-box;
	text-align: justify;
	line-height: 1.8;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.08em;
}

.term {
	font-size: 20px;
	font-weight: bold;
	display: block;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.04em;
}

/* .title-sub p:first-child {
	color: #3DA5E6;
	font-size: 18px;
	font-weight: bold;
} */

.title-sub p+p {
	margin-top: 1em;
}

.content-box p {
	margin-bottom: 1em;
}

.conten-box-inner {
	margin-bottom: 20px;
	line-height: 1.7;
	font-size: 14px;
	padding: 0 10px;
}

.conten-box-inner ul {
	margin-bottom: 1em;
}

.conten-box-inner h3 {
	font-weight: bold;
	margin-bottom: 20px;
	font-size: 120%;
	border-bottom: 1px solid #aaa;
}

.conten-box-inner h4 {
	font-weight: bold;
}

span.underline {
	text-decoration: underline;
}

ul.disc li {
	list-style: disc;
	margin-left: 1.5em;
}

ul.circle {
	list-style-type: none;
	margin-left:14px;/* マーカーを1文字寄せた分、ULにマージンを設定*/
}
ul.circle li:before {
	content: '●'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-14px; /* 1文字分、左に寄せる */
}

/* content-box */
.content-box{
	box-sizing: border-box;
	margin: auto;
	padding: 30px 0 64px;
}

.content-box-head {
	font-size: 22px;
	background-color: #efefef;
	padding: 6px 10px;
	margin-bottom: 1em;
}

/* imgbox */

.imgbox-sub{
	margin-top: 12px;
}

/* itembox */
.itembox{
	background: #f7f6f2;
	box-sizing: border-box;
}

.itembox .m-btn-active{
	margin-top: 16px;
}

.item-head{
	background: #a9a7a0;
	border-radius: 100px;
	color: #fff;
	line-height: 1;
	margin-top: 16px;
	padding: 6px 0;
	text-align: center;
	width: 100%;
}




/* headline */
.headline {
	position: relative;
	text-align: left;
	margin-top: 30px;	
	margin-bottom: 30px;
	padding-left: 20px;
}

.headline:before {
  position: absolute;
  background-color: #424242;
  border-radius: 1em;
  content: "";
  left: 0%;
  top: 5%;
  bottom: 10%;
  width: 1px;
  height: 90%;
}

.headline-text {
	position: relative;
}


.more-btn-box {
	width: 100%;
	margin: 30px auto 60px;
}

.m-column .head {
	font-size: 28px;
}

.m-column .head span {
	font-size: .5em;
	display: block;
}

.dash-line {
	grid-area: dash;
	margin: .5em 0;
}

.newsimg {
	height: auto;
}

.bg-gray {
	background-color: #efefef;
}

.bg-news {
	background-color: #d7e5f2;
}

.how-to-use {
	padding: 40px 0;
}

.depart-de-loop {
	padding: 60px 0 40px;
}

.how-to-use h3,
.depart-de-loop h3 {
	text-align: center;
	font-size: 23px;
	margin-bottom: 1em;
}

.img-box {
	margin: 0 auto;
	width: 96%;
	max-width: 700px;
	overflow: hidden;
	text-align: center;
  }

 .img-box img {
	width: 100%;
	height: auto;
 } 

.flow-box {
	margin: 30px 0;
} 

.flow-box img {
	max-width: 100%;
}


.depart-de-loop p {
	text-align: justify;
	font-size: 14px;
	line-height: 1.75;
}

.content-box .inquiry-box p:last-child {
	margin-bottom: 0;
}

.inquiry-box {
	border: 1px solid #424242;
	text-align: center;
	padding: 30px 20px;
	line-height: 1.4;
}

.inquiry-box p {
	font-size: 22px;
}

@keyframes slideAnime {
	0%, 75%, 100% { opacity: 0; } /* 非表示のタイミング */
	25%, 50% { opacity: 1; } /* 表示されるタイミング */
}


/*--------*/
/* HOVER  */
/*--------*/

.main-content .m-btn-active:hover{
	background: #45423f;
}
.main-content a:hover{
	opacity: .7;
}

  
@media screen and (min-width:641px){
/*--------*/
/*   PC   */
/*--------*/

/* PC title */
.title-sub{
	text-align: center;
}

.title img {
	aspect-ratio: 125/34;
}

.content-box{
	padding: 50px 0 64px;
}


.navi ul {
	border-top: none;
	margin: 0 auto 0;
	max-width: 1000px;
	justify-content: center;
}

/* PC content-box */

.headline {
	text-align: center;
	position: relative;	
	padding-left: 0;
}

.headline::before {
	content: none;
}

.headline::after {
  content: '';
  width: 90px;
  height: 1px;
  display: inline-block;
  background-color: #424242;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 45px)
}

.headline-num{
	width: 60px;
	text-align: center;
	position: static;
	transform: none;
	display: inline-block;
}

.headline-sentence {
	position: static;
	transform: none;
	display: inline-block;
}

/* PC shop-intro */
.shop-intro{
	width: 1000px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

.shop-img-box {
	width: 500px;
}


.shop-txt-box {
	flex: 1;
	padding: 0 32px;
}


/* PC itembox */
.itembox{
	position: relative;
	width: 360px;
	margin: 0 auto;
}

.shop-txt-head {
	margin: 0 auto 16px;
	font-size: 20px;
}


.more-btn-box {
	max-width: 320px;
	margin: 60px auto;
}

.depart-de-loop p {
	text-align: center;
	font-size: 14px;
}

}


@media screen and (max-width: 640px) {
	.title img {
		aspect-ratio: 8/7;
	}

	.button-sandp {
		right: 28%;
	}
}