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

/* ==========================================================================
section
========================================================================== */
section {
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	overflow: hidden;
}

section.bg_block00 {
	background-color: unset;;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
	        
}

section.bg_block {
	background-color: rgb(16 16 16 / 87%);
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
}
section.bg_block02 {
	background-color: rgba(255, 255, 255, 0.8);
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
	color: #292929;
}
section.bg_block03 {
	background-color: #000;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
	color: #292929;
}

section .inner {
	margin: 40px auto 0;
	width: auto;
}
section {
	position: relative;
	width: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding: 0 0 5%;
}

.contents {
	width: 100%;
	margin: 0 auto;
	color: #FFF;
	background-image:url("../../portal/images/bg_01.png");
	background-position: center top;
	background-size: auto;
	background-repeat: no-repeat;
	    background-attachment: fixed;
}

.title02 {
	position: relative;
	padding-top: 1em;
	padding-bottom: 0.5em;
	font-size: 2em;
	text-align: center;
	font-weight: 800;
	letter-spacing: 0.02em;
	max-width: 1000px;
    margin: 0 auto;
transform: translateZ(0);  
  backface-visibility: hidden;
	color: #fff;

}
.title02 span {
	position: relative;
	z-index: 2;
}
.title02::before {
	content: attr(data-en);
    position: absolute;
    top: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255 0 0);
    font-size: 0.6em;
    font-family: "noto-serif", serif;
	font-weight: 400;
	will-change: transform;
}

.title02::after {
	         content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: rgb(255 0 0);
    right: 0;
    margin: 0 auto;
}

.contents + .contents {    padding: 60px 0 0 ;
    margin-top: 0;}
.contents + .contents.last{padding-bottom: 60px;}


.inner {
	width: 85%;
	margin: 0 auto;
	max-width: 1100px;
	text-align: center;
}
.bgOuter {
	padding-bottom: 0;
	background-image: url(../images/bg_outer.png);
	background-position: center bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.cpr.en{    background: -webkit-linear-gradient(45deg, hsla(26, 100%, 62%, 1) 0%, hsla(333, 100%, 51%, 1) 100%);
    padding: 20px 0;
    text-align: center;
    color: #fff;font-size: 0.9em;}


/* ==========================================================================
campaign,
========================================================================== */
#campaign .inner{background: #222;padding: 1.5em;position: relative;color: #fff;}
#campaign .cp_link{    display: flex;
    margin: 2em auto 1em;
    text-align: center;
    max-width: 1000px;}
#campaign .cp_link li{    width: 30%;    margin: 0 auto;text-align: center;text-indent: 0;padding-left: 0;}
#campaign .cp_link li + li{    border-left: 1px solid #fff;}
#campaign .cp_link li a:hover{border-bottom: 2px solid #ff0000;}

#campaign h3{ background: -webkit-linear-gradient(45deg, hsl(0deg 0% 100%) 0%, hsl(0deg 0% 40.31% / 13%) 90%, hsl(0deg 0% 0% / 13%) 100%);
    font-size: 1.2em;
    color: #000;
    font-weight: bold;
    text-align: left;
    padding-left: 1em;
    font-style: italic;
    margin: 0 0 1em 0;
    width: 20em;
    position: absolute;
    top: -0.5em;
    left: 0;
	
}
#campaign h4{    font-weight: bold;
    margin: 1em auto;
    font-size: 1.4em;
    line-height: 130%;
    background: #ef0000;
    padding: 1em 0.5em;
    color: #ffffff;}
#campaign h4.arrow{position: relative;cursor: pointer;}
#campaign h4.arrow::before,
#campaign h4.arrow::after {
        content: "";
    position: absolute;
    bottom: -1em;
    left: calc(50% - 2px);
    width: 3px;
    height: 20px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: 50% calc(100% - 1px);
}

#campaign h4.arrow::before {
  transform: rotate(45deg);
}

#campaign h4.arrow::after {
  transform: rotate(-45deg);
}
#campaign p.ad_h{    font-weight: bold;
    font-size: 1.5em;
    margin: 0.5em auto;
    background: #f50303d1;
    padding: 0.5em;}

#campaign ul li{line-height: 1.3em;margin: 0.5em 0;text-indent: -1em;padding-left: 1em;}
#campaign dt{text-align: left;margin: 2em 0 0.5em;position: relative;margin-left: 0.5em;}
#campaign dt::before{    content: '';
    display: block;
    position: absolute;
    background: #cf0808;
    width: 5px;
    height: 1em;
    bottom: 0;
	left: -0.5em;
    top: 0.3em;}
#campaign dd{text-align: left;font-weight: normal;font-size: 0.9em;}
#campaign a.a_txt{color: #ff0000!important;text-decoration: underline!important;}
#campaign .kiyaku{font-size: 0.9em;    font-size: 0.9em;
    background: #4d4d4d;
    padding: 5px 10px;
    height: 180px;
    overflow-y: scroll;}
#campaign .kiyaku dt{margin: 1em 0 0;}
#campaign .kiyaku dt::before{display: none;}
#campaign .kiyaku dd{text-indent: -1em;padding-left: 1em;}
#campaign img{max-width: 800px;width: 100%;}

#campaign #max dd.d_max_lead span{display: inline-block;margin-bottom: 0.5em;}
#campaign #max div.plan{        background: #383637;
    padding: 1em 0.5em 2em;}
#campaign #max div.plan + .plan{margin-top: 2em;}
#campaign #max h4{    font-size: 1.2em;
    color: #ffffff;text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
    padding: 0.5em;margin-bottom: 0;
    background: -webkit-linear-gradient(359deg, hsl(330deg 1.82% 21.57%) 0%, hsl(0deg 0% 100% / 34%) 50%, hsl(330deg 1.82% 21.57%) 100%);}


/*--------------------------------
テキストclamp
--------------------------------*/

    dd {
      margin: 0 0 1em 0;
      padding: 0;
    }

    .clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 表示する行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
}

.clamp-text.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.read-more {
  display: inline-block;
  margin-top: 0.5em;
  color: blue;
  cursor: pointer;
}
.read-more{    color: #fff !important;
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.8em auto 0;
    border-radius: 10em;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
text-align: left;
padding-left: 1em;}


#campaign dd.d_max_lead{font-size: 1em;    margin: 1em auto;}



/* ==========================================================================
goods
========================================================================== */
#goods {text-align: center;}
#goods img{max-width: 800px;width: 80%;margin: auto;}


@media screen and (max-width: 812px) {
	/* ==========================================================================
sp section
========================================================================== */
	section {
		position: relative;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	
	.inner {
		width: 100%;
		padding: 0 5%;
	}
	
	.bg_block .inner,.bg_block02 .inner {
		padding: 0;
		margin-top: 30px;
		font-size: 0.9em;
	}
	section.bg_block {
		        padding: 5% 4% 5%;
        margin-bottom: 0;
        width: 100%;
	}
	section.bg_block02 {
		padding: 2%;
		margin-bottom: 0;
		width: 94%;
	}
	section.bg_block03{        padding: 0;
        border: 1px solid #919191;
        width: 94%;
        margin: 0 auto;}
	.contents.hl{margin-top: 20px;padding-top: 0;}

	.contents {
		padding-top: 20px;
		padding-bottom: 30px;
		margin-top: 0px;
		background-image: url(../images/bg_sp_01.png);
		background-size: 100% auto;
		
	}
	.contents + .contents{padding: 20px 0 50px;}
	.title02{font-size: 1.3em;}
	section + section {
    margin-top: 2em !important;
}
	
/* ==========================================================================
  sp campaign
  ========================================================================== */
	#campaign .inner{padding: 2%;}
	#campaign .cp_link{font-size: 0.8em;}
	#campaign .btn_b{width: 100%;}
	#campaign .btn_max{height: 4em;}
	#campaign h4{font-size: 1em;margin-top: 2em; padding: 0.5em 0;}
	#campaign p.ad_h{font-size: 1.2em;}
	#campaign dd.d_max_lead{font-size: 1em;}
	
	#campaign #max p.ad_h{font-size: 0.9em;}
	#campaign #max p.ad_h span{font-size: 0.8em!important;}
	#campaign #max h4{font-size: 1em;margin-top: 0.5em;}
	#campaign #max dd.d_max_lead{font-size: 0.85em;text-align: justify;}
/* ==========================================================================
  sp special
  ========================================================================== */
	#special .flex_box{display: flex;flex-flow: column;}
	.flex_box .box_l,.flex_box .box_r{width: 100%;display: flex;}
	#special .flex_box h5{font-size: 0.9em;}
	#special .inner{padding: 2%;}
	#special h4{font-size: 1.1em;}
	#special ul li{min-width: 100px;padding: 0 5px;}
/* ==========================================================================
goods sp
========================================================================== */
#goods h2{font-size: 1.2em;}
#goods h2 + p{font-size: 1em;}
#goods {font-size: 0.9em;}
}