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

:root {
	--main-color:#cc3300;
	--light-color:#fbf0ed;
	--sub-color:#ffcc00;
	--color-black:#000;
	--gld: #d3b929;
	--red: #c3012d;	
}

html {
	height: 100%;
	font-size:62.5%;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;	
}
body {
	font-size:16px;
	line-height:normal;
	color:#555;
	font-family:'Roboto','Noto Sans JP', sans-serif;
	display: flex;
	flex-flow: column;
	min-height: 100%;
}

header,main,footer,div,ul,li {box-sizing: border-box;}
h1,h2,h3,h4 {font-feature-settings: "palt";}

header {
	width:100%;
	height: 60px;
	padding:0 0 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

main {
	width:100%;
/*	flex: 1;*/
}

footer {
	width:100%;
	background: var(--color-black);
}

img {max-width: 100%; height: auto;}

del {text-decoration: none}

/* Layout */

.inner {width:1020px; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto;}


	.shw,.shw-sp {display:none;}
	.hyd,.hyd-sp {display: block;}

.dan-1 {text-indent: -1em; padding-left: 1em;}
.dan-2 {text-indent: -2em; padding-left: 2em;}
.dan-3 {text-indent: -3em; padding-left: 3em;}
.dan-5 {text-indent: -5em; padding-left: 5em;}
.dan-6 {text-indent: -6em; padding-left: 6em;}

.anc {display: block; padding-top: 60px; margin-top: -60px;}

.lh17 {line-height: 1.7;}
.lh15 {line-height: 1.5;}
.lh13 {line-height: 1.3;}
.lh12 {line-height: 1.2;}
.lh10 {line-height: 1.0;}



/* header */
.head__navi {
height: 100%;
}
.head__navi a {
	color:#fff;
	background: black;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0px 15px
}

.sub__t {
	font-size: 1.4rem;
	font-weight: normal;
	margin-left: 1em
}
.sub__t a:hover {
	color: var(--main-color);
}


@media screen and (max-width:600px){
	.sub__t {
		display: none;
		}
header h1 img {
	width:40vw
}
}

/* mv */
.mv__inner {
	width:1020px; 
	padding-left: 10px; 
	padding-right: 10px; 
	margin-left: auto; 
	margin-right: auto;
	height: 420px;
	background: url("../img/pmv2.jpg") no-repeat;
	background-size: cover;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items:flex-start;
}
.mv__inner h1 {
	background: var(--main-color);
	width: fit-content;
	color: #fff;
	padding: 10px 20px;
	line-height: 1
}
h1.h1__1 {
	font-size: 2.4rem !important
}
h1.h1__2 {
	font-size: 3.6rem !important
}

@media screen and (max-width:1000px){
	.inner,.mv__inner {width:100%;}
}
@media screen and (max-width:834px){
	.sp-shw {display:block;}
	.sp-hyd {display: none;}	
}

@media screen and (max-width:768px){
	body {font-size: 14px;}
	
	.inner,.mv__inner {width:100%; padding-left: 15px; padding-right: 15px;}
	.mv__inner {
			background: url("../img/pmv_sp.jpg") left bottom no-repeat;
			background-size: cover;
			display: flex;
	flex-flow: column;
	justify-content:flex-start;
	align-items:flex-start;
		height: 50vh;
		padding-top: 5vh
	}
	.shw {display:block;}
	.hyd {display: none;}
	
h1.h1__1 {
	font-size: 5vw !important
}
h1.h1__2 {
	font-size: 7vw !important;
	line-height: 1.2;
}	
}



/* gcs */
.gcs__wrap {
	background: var(--light-color);
	padding: 60px 0;
	margin-bottom: 80px;
}

.gcs__tit {
	font-size: 4rem;
	text-align: center;
	margin-bottom: 40px;
	color: #000;
	position: relative;
  display: inline-block;
}

/*
.gcs__tit  span {
  padding: 0 0.5em;
}
*/
.gcs__tit::after {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  height: 100%;
  border-right: 1px solid var(--main-color);
  transform: rotate(25deg) translateY(-50%);
}
.gcs__tit::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  height: 100%;
  border-right: 1px solid var(--main-color);
  transform: rotate(-25deg) translateY(-50%);
}

.col__2 {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 40px;
	margin-bottom: 80px;
}
.col__img {
	width:58%;
}
.col__txt {
	width:38%;
}
.about_gcs {
	padding: 1em 1.5em;
	background: #f2f2f2;
	font-size: 1.4rem;
	border-radius: 8px;
}
.spl_link {
	color: var(--main-color);
	text-decoration: underline;
}
.spl_link:hover{
	color: var(--sub-color);
}

@media screen and (max-width:600px){
	.gcs__tit {
		font-size:6.4vw;
	}
	.gcs__tit  span {
  padding: 0;
}
	.col__2 {
		display: block;
		padding: 20px;
	}
	.col__img,
	.col__txt {
	width:100%;}
	.col__img{
		margin-bottom: 20px
	}

}

.spl_tit {
	font-size: 3rem;
	text-align: center;
	margin-bottom: 40px;
	color: #000;
}

.spl__list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.spl__list > li {
	width:49%;
	background: #fff;
	padding: 10px;
	margin-bottom: 30px;
	display: flex;
	flex-flow: column;
}
.ribbon {
	position: relative;
}
.ribbon14 {  
  display: inline-block;
  position: absolute;
  top: -10px;
  left: 7px;
  margin: 0;
  padding: 10px 0;
  z-index: 2;
  width: 34px;
  text-align: center;
  font-size: 17px;
  color: white;
  background: var(--main-color);
}
.ribbon14:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 17px solid var(--main-color);
  border-right: 17px solid var(--main-color);
  border-bottom: 10px solid transparent;
}
@media screen and (max-width:800px){
.ribbon14 {  
  display: inline-block;
  position: absolute;
  top: -10px;
  left: -7px;
  margin: 0;
  padding: 10px 0;
  z-index: 2;
  width: 30px;
  text-align: center;
  font-size: 17px;
  color: white;
  background: var(--main-color);
}
.ribbon14:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 15px solid var(--main-color);
  border-right: 15px solid var(--main-color);
  border-bottom: 10px solid transparent;
}	
}
.spl__list__tit {
	font-size: 1.8rem;
	padding-bottom: 10px;
	text-align: center;
	margin-bottom: 20px;
	border-bottom:1px solid #ccc;
}

.spl__list__maker {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
/*	margin-top: auto*/
}
.spl__list__maker > li {
	text-align: center;
	padding: 0px
}

.spl__list__maker > li img {
	width:104px
}

@media screen and (max-width:768px){
.spl__list {
	display: block;
}
.spl__list > li {
	width:100%;
	background: #fff;
	padding: 10px;
}	
}

/* item */
.sold__out {
	position: relative;
}
.sold__out::after {
	content: "ご成約";
	color:#fff;
	font-size: 2rem;	
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	border-radius: 16px;
}

.item__wrap {
	margin-bottom: 80px;
}

.item__tit {
	font-size: 3rem;
	text-align: center;
	margin-bottom: 20px;
	color: var(--main-color);
	position: relative;
}
.item__tit span {
	position: relative;
}
.item__tit span::after {
	position: absolute;
	top:-30px;
	right: -5em;
	margin-left: 1em;
	transform: rotate(-20deg);
	content: "早い者\A勝ち!?";
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
	font-weight: normal;
/*	color:#000;*/
	background: #fff;
	width:4em;
	height: 4em;
	border-radius: 50%;
	border:2px solid var(--main-color);
	
}
.item__read {
	font-size: 2rem;
}
.item__read big {
	font-size: 200%;
}

.item__list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.item__list li {
	width:30%;
	margin-bottom: 40px;
	display: flex;
	flex-flow: column;
}
.item__list::after {
	content: "";
	width: 30%;
	height: 0;
	display: block;
}

.item__btn {
	margin-top: auto;
}
.item__img {
	margin-bottom: 10px
}
.item__list__tit {
	font-size: 1.8rem;
	font-weight: normal;
	margin-bottom: 10px
}
.item__price {
	width: 100%;
	margin-bottom: 10px
}
.item__price th {
	font-weight: normal;
	font-size: 1.4rem
}
.item__price td {
	text-align: right
}
th.limited {
	font-size: 1.6rem;
	color:black
}
td.limited {
	font-size: 2rem;
	color:black
}
td.limited small{
	font-size: 1.2rem
}




.price__off__wrap {
	text-align: left;
}
.price__off {
	position: relative;
	background: var(--sub-color);
	color: var(--main-color);
	display: inline-block;
	padding:5px 10px;
	border-radius: 8px;
	margin-bottom: 10px;
}
.price__off::after {
	position: absolute;
	content: "";
	left:0;
	right: 0;
	margin: 0 auto;
	bottom:-10px;
	width: 0;
    height: 0;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 10px solid var(--sub-color);
}
.item__price__list {
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px
}
.lmtd {
	font-size: 2.8rem;
	color: var(--main-color);
}
.dai_su {
	font-size: 2.4rem;
	font-weight: 700;
	color:var(--main-color);
}

@media screen and (max-width:768px){
	.item__list li {
	width:48%;
	}
	
	.item__btn {
		display: flex;
		flex-flow: column;
	}
	
	.item__price__list {
			display: flex;
	flex-flow: column;
		align-items: flex-start
	}
	.price__off__wrap {
	text-align: center;
}
.price__off {
	margin-bottom: 10px;
}	
	.arrow {
/*		transform: rotate(90deg)*/
		display: none;
	}
	.price__normals {
		margin-bottom: 5px
	}
	.price__normals dt{
	font-size: 1.2rem;
}
	.item__read {
	font-size: 5vw;
}
}

/* btn */
.btn {
	background: transparent;
	font-size: 1.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn.kuwa {
	background: var(--main-color);
	border:1px solid var(--main-color);
	height: 40px;
	color:#fff;
	transition: 0.3s ease all;
	border-radius: 24px;
}
.btn.kuwa:hover {
	background: #fff;
	color: var(--main-color);
}

.btn.kaku {
	font-weight: 700;
	font-size: 3rem;
	min-height: 60px;
	border-radius: 32px;
	background: #fff;
	border:2px solid var(--main-color);
	color:var(--main-color);
	transition: 0.3s ease all;	
}
.btn.kaku:hover {
	background: var(--main-color);
	color: #fff;
}
@media screen and (max-width:600px){
	.btn.kaku {
	font-size:5.2vw;
	}
}

.cyu__wrap {
	padding: 1em;
	border:1px solid #ddd;
	font-size: 1.2rem
}

/* detail */
.company {
	font-weight: 700;
}

/* footer */
.footer__navi__wrap {
	padding: 40px 20px;
}
.footer__navi__list {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center
}
.footer__navi__list li:first-child {
flex: 1
}
.footer__navi__list li:nth-child(2){
	margin-right: 40px;
}
.footer__navi__list li a{
	font-size: 1.4rem;
	color:#fff;
}
.footer__navi__list li a:hover {
	color: var(--main-color);
}
.f__copy {
	color:#ccc;
	padding: 10px 0;
	font-size: 1.2rem
}
@media screen and (max-width:600px){
	.footer__navi__list {
		display: block
	}
	.footer__navi__list li {
	border-right: 0px solid #ccc;
		padding-bottom: 10px;
		margin-bottom: 10px
}
	.footer__navi__list li:first-child {
		border-bottom: 1px solid #ccc;
	}
}