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


body {
    background-color: #dfe0d7;
}






/** メインビジュアル **/  
    
.mv {
    display: flex;
    align-items: center;
    /* min-height: 100vh; */
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 80px;
    padding: 100px 0 0;
    color: #333;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.word {
  display: flex;
}

h1 {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: auto;
    font-size: 1.5rem;
    max-width: 800px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: #389ac1;
}
    
    
/** イントロ **/  


 #intro {
    background-color: #FFF;
    padding: 75px;
}   
    
 .intro-inner {   
     margin: auto;
     max-width: 750px;
    }
    
.intro-subtitle {
    margin: 20px auto 5px;
     font-family: "Josefin Sans", sans-serif;
	     font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 2px;
    font-size: 52px;
    max-width: 750px;
}
    
.intro-text {
    font-size: 1.1rem;
    line-height: 2;
    margin: 20px auto;
    max-width: 750px;
}
    
.intro-date {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: date;
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: "Times New Roman", Times, Georgia, serif;
    letter-spacing: .12em;
    line-height: 1.5;
    font-style: italic;
    font-size: 13px;
    color: #aaa;
}   

    
/** イントロのテキスト装飾 **/    

.c-marker {
    background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .5em;
}
    












#container {
	width: auto!important;
	padding: 100px;
}
.section-title {
	font-size: 2.5rem;
	     font-family: "Josefin Sans", sans-serif;
	     font-optical-sizing: auto;
    font-weight: 700;
	font-weight: 600;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 1.8em;
	color: #323232;
}
.section-wrapper {
	padding: 80px;
}

.item-area-list-block {
    padding: 20px;
}
.item-area-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}



.div1 {
	grid-area: 1 / 1 / 2 / 2;
}
.div2 {
	grid-area: 1 / 2 / 2 / 3;
}
.div3 {
	grid-area: 1 / 3 / 2 / 4;
}
.div4 {
	grid-area: 1 / 4 / 2 / 5;
}
.div5 {
	grid-area: 2 / 1 / 3 / 2;
}
.div6 {
	grid-area: 2 / 2 / 3 / 3;
}
.div7 {
	grid-area: 2 / 3 / 3 / 4;
}
.div8 {
	grid-area: 2 / 4 / 3 / 5;
}
.div9 {
	grid-area: 3 / 1 / 4 / 2;
}
.div10 {
	grid-area: 3 / 2 / 4 / 3;
}
.div11 {
	grid-area: 3 / 3 / 4 / 4;
}
.div12 {
	grid-area: 3 / 4 / 4 / 5;
}



.item-area-list2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.div1b { grid-area: 1 / 1 / 2 / 2; }
.div2b { grid-area: 1 / 2 / 2 / 3; }
.div3b { grid-area: 1 / 3 / 2 / 4; }
.div4b { grid-area: 1 / 4 / 2 / 5; }
.div5b { grid-area: 2 / 1 / 3 / 2; }
.div6b { grid-area: 2 / 2 / 3 / 3; }
.div7b { grid-area: 2 / 3 / 3 / 4; }
.div8b { grid-area: 2 / 4 / 3 / 5; }
.div9b { grid-area: 3 / 1 / 4 / 2; }
.div10b { grid-area: 3 / 2 / 4 / 3; }
.div11b { grid-area: 3 / 3 / 4 / 4; }
.div12b { grid-area: 3 / 4 / 4 / 5; }
.div13b { grid-area: 4 / 1 / 5 / 2; }
.div14b { grid-area: 4 / 2 / 5 / 3; }
.div15b { grid-area: 4 / 3 / 5 / 4; }
.div16b { grid-area: 4 / 4 / 5 / 5; }















.swiper {
	width: 720px;
}
.image-area {
	width: 100%;
	margin: 0 auto 80px;
	padding: 40px;
}
.image-area-heading {
	margin: 15px 0 15px;
	font-size: 20px;
	font-weight: 600;
	line-height: 40px;
}
.image-area-textblock {
	padding: 0 20px;
}
.image-area-desctiption {
	margin: 0 0 15px;
	font-size: 15px;
	line-height: 30px;
}
.image-area-cresit {
	margin: 0 0 15px;
	font-size: 15px;
	line-height: 30px;
	font-weight: 600;
}
.image-area-price {
	margin: 0 0 15px;
	font-size: 15px;
	line-height: 30px;
	font-weight: 600;
}
.item-list-button {
	margin: 50px auto;
}
.c-btn {
	cursor: pointer;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.c-btn {
	background: #333;
	border: 2px solid #333;
	border-radius: 60px;
	color: #333;
	display: block;
	font-weight: bold;
	max-width: 300px;
	padding: 15px 40px;
	text-align: center;
}
.c-txt {
	color: #333;
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.06em;
}
.c-btn.slide {
	background: #fff;
	color: #333;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin: auto;
}
.c-btn.slide::after {
	background: #333;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.c-btn.slide:hover {
	color: #fff;
}
.c-btn.slide:hover::after {
	transform: scale(1, 1);
}




.number-m {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: #b4b1b1;
    border-radius: 50%;
    color: #dfe0d7;
    text-align: center;
    z-index: 99999;
	  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
}


.number-s {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #b4b1b1;
    border-radius: 50%;
    color: #dfe0d7;
    text-align: center;
    z-index: 99999;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
}
.js-popUp{
    transform: scale(.9);
    opacity: 0;
    visibility: hidden;
}


.item-area-list-heading {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    margin: 5px 0;
}


@media (max-width: 1000px) {


#intro {
    background-color: #FFF;
    padding: 20px;
}

.intro-text {
    font-size: 1rem;
    line-height: 2;
    margin: 20px auto;
    max-width: 750px;
}

.intro-inner {
    padding: 20px;
}



#container {
    width: auto!important;
    padding: 20px;
}
.section-wrapper {
    padding: 0;
}
.swiper {
	width: 100%;
}

.image-area {
    width: 100%;
    margin: 0 auto 80px;
    padding: 0px;
}


.item-area-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 4 / 1 / 5 / 2; }
.div8 { grid-area: 4 / 2 / 5 / 3; }
.div9 { grid-area: 5 / 1 / 6 / 2; }
.div10 { grid-area: 5 / 2 / 6 / 3; }
.div11 { grid-area: 6 / 1 / 7 / 2; }
.div12 { grid-area: 6 / 2 / 7 / 3; }





.item-area-list2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.div1b { grid-area: 1 / 1 / 2 / 2; }
.div2b { grid-area: 1 / 2 / 2 / 3; }
.div3b { grid-area: 2 / 1 / 3 / 2; }
.div4b { grid-area: 2 / 2 / 3 / 3; }
.div5b { grid-area: 3 / 1 / 4 / 2; }
.div6b { grid-area: 3 / 2 / 4 / 3; }
.div7b { grid-area: 4 / 1 / 5 / 2; }
.div8b { grid-area: 4 / 2 / 5 / 3; }
.div9b { grid-area: 5 / 1 / 6 / 2; }
.div10b { grid-area: 5 / 2 / 6 / 3; }
.div11b { grid-area: 6 / 1 / 7 / 2; }
.div12b { grid-area: 6 / 2 / 7 / 3; }
.div13b { grid-area: 7 / 1 / 8 / 2; }
.div14b { grid-area: 7 / 2 / 8 / 3; }
.div15b { grid-area: 8 / 1 / 9 / 2; }
.div16b { grid-area: 8 / 2 / 9 / 3; }
.item-area-list-block {
    padding: 10px;
}


.number-s {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #b4b1b1;
    border-radius: 50%;
    color: #dfe0d7;
    text-align: center;
    z-index: 99999;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 0.8rem;
}


.item-area-list-heading {
    font-size: 12px;
	font-weight: 600;
}

.item-area-list-text {
    font-size: 12px;
}

.item-area-list-prise {
    font-size: 12px;
}

}

@media (max-width: 424px) {

#container {
    width: auto!important;
    padding: 10px;
}



.mv {
  display: flex;
  align-items: center;
  width: 100%;
  color: #333;
}



.intro-subtitle {
    margin: 20px auto 5px;
     font-family: "Josefin Sans", sans-serif;
    line-height: 1.2;
    letter-spacing: 2px;
    font-size: 40px;
    max-width: 750px;
}


.intro-text {
    font-size: 0.9rem;
    line-height: 2;
    margin: 20px auto;
    max-width: 750px;
}



}