@charset "utf-8";
/* # =================================================================
   #contents
   # ================================================================= */
#contents {
	width: 100%;
	max-width: 1200px;
	margin:0 auto;
	padding: 0 0 50px 0;
	font-family: 'Noto Sans JP', sans-serif;
}


/* # =================================================================
   #共通設定
   # ================================================================= */
section {
	font-size: 18px;
	line-height: 1.5;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
}

section ul li h4 {
	font-size: 24px;
	font-size: 18px;
	font-size: clamp(1.125rem, 0.214rem + 1.71vw, 1.5rem);
	font-weight: bold;
	position: relative;
	padding: 0 26px;
	line-height: 1;
	display: inline-block;
}
section ul li h4::before, 
section ul li h4::after {
	content: "";
	background: url(../../images/icon_green.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 24px;
	height: 24px;
	width: clamp(1.25rem, 0.643rem + 1.14vw, 1.5rem);
	height: clamp(1.25rem, 0.643rem + 1.14vw, 1.5rem);
	position: absolute;
	top: 50%;
	margin-top: -10px;
}
section ul li h4::before {
	left: 0;
}
section ul li h4::after {
	right: 0;
}
section ul li h4.blue::before, 
section ul li h4.blue::after {
	background: url(../../images/icon_blue.svg);
	background-size: 100%;
	width: 24px;
	height: 24px;
	width: clamp(1.25rem, 0.643rem + 1.14vw, 1.5rem);
	height: clamp(1.25rem, 0.643rem + 1.14vw, 1.5rem);
	position: absolute;
	top: 50%;
	margin-top: -10px;
}
section ul li h4.pink::before, 
section ul li h4.pink::after {
	background: url(../../images/icon_orange.svg);
	background-size: 100%;
	width: 24px;
	height: 24px;
	width: clamp(1.25rem, 0.643rem + 1.14vw, 1.5rem);
	height: clamp(1.25rem, 0.643rem + 1.14vw, 1.5rem);
	position: absolute;
	top: 50%;
	margin-top: -10px;
}


/* # =================================================================
   titleBlock
   # ================================================================= */
.titleBlock {
	width: 100%;
	max-width: 1200px;
	height: 250px;
	margin:0 auto;
	overflow: hidden;
	position: relative;
	display: flex;
	z-index: -1;
	@media screen and (max-width:850px) {
		max-width: 100%;
		height: 150px;
	}
}
.titleBlock h2 {
	position: absolute;
	display: block;
	left:0;
	top:0;
	width: 40%;
	height: 250px;
	background-color: var(--green3);
	background-image: url(../../images/bg.png);
	background-size: 300%;
	text-align: left;
	padding: 100px 0 0 4%;
	font-size: 36px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: bold;
	color: #FFF;
	clip-path: polygon(0% 0, 100% 0, 80% 100%, 0 100%);
	text-shadow: 2px 2px rgba(0,0,0,0.7);
	letter-spacing: 1px;
	@media screen and (max-width:850px) {
		font-size: 20px;
		width: 50%;
		padding: 60px 0 0 0%;
		text-align: center;
	}
}
.recruitColor h2 {
	background-color: var(--pink0);
	color: #FFF33F;
}
.accessColor h2 {
	background-color: var(--blue1);
}
.requestColor h2 {
	background-color: var(--pink3);
}
.titleBlockImage {
	display: block;
	width: 100%;
}
.titleBlockImage img {
	width: 70%;
	height: 250px;
	margin-left: 30%;
	object-fit: cover;
}
.accessColor > .titleBlockImage img {
	object-fit: cover;
}
.privacyColor h2 {
	background-color: var(--pink3);
	width: 50%;
}








/* # =================================================================
   conceptBlock
   # ================================================================= */
.conceptBlock {
	
}
.conceptBlock h2 {
	padding: 20px 0 40px 0;
	display: block;
	text-align: center;
	font-size: 40px;
	font-size: 24px;
	font-size: clamp(1.5rem, -0.929rem + 4.57vw, 2.5rem);
	color: #000;
	font-weight: bold;
	font-family: "M PLUS Rounded 1c", sans-serif;
	@media screen and (max-width:850px) {
		width: 92%;
		margin: 0 auto;
		text-align: left;
	}
}

.conceptBlock .kaigo, 
.conceptBlock .iryou, 
.conceptBlock .sumai {
	border: 5px solid #CCC;
	border-radius: 20px;
	position: relative;
	background-image: url(../../images/bg2.png);
	background-size: 80%;
	background-repeat: repeat;
	padding: 20px;
	margin-bottom: 50px;
	width: 98%;
	margin-left: 2%;
	@media screen and (max-width:850px) {
		background-size: 100%;
		padding: 10px;
		width: 96%;
		margin-bottom: 30px;
	}
}
.conceptBlock .kaigo {
	background-color: var(--pink2);
	color: var(--pink1);
	border-color: var(--pink1);
}
.conceptBlock .iryou {
	background-color: var(--green2);
	color: var(--green1);
	border-color: var(--green1);
}
.conceptBlock .sumai {
	background-color: var(--yellow2);
	color: var(--yellow1);
	border-color: var(--yellow1);
}
.conceptBlock .kaigo h3, 
.conceptBlock .iryou h3, 
.conceptBlock .sumai h3 {
	font-size: 38px;
	font-size: 30px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: bold;
	margin-left: 80px;
	margin-bottom: 15px;
	text-shadow: rgb(255, 255, 255) 6px 0px 0px, rgb(255, 255, 255) 5.91686px 0.995377px 0px, rgb(255, 255, 255) 5.66974px 1.96317px 0px, rgb(255, 255, 255) 5.2655px 2.87655px 0px, rgb(255, 255, 255) 4.71532px 3.71022px 0px, rgb(255, 255, 255) 4.03447px 4.44106px 0px, rgb(255, 255, 255) 3.24181px 5.04883px 0px, rgb(255, 255, 255) 2.35931px 5.51667px 0px, rgb(255, 255, 255) 1.41143px 5.83163px 0px, rgb(255, 255, 255) 0.424423px 5.98497px 0px, rgb(255, 255, 255) -0.574341px 5.97245px 0px, rgb(255, 255, 255) -1.55719px 5.79441px 0px, rgb(255, 255, 255) -2.49688px 5.45578px 0px, rgb(255, 255, 255) -3.36738px 4.96596px 0px, rgb(255, 255, 255) -4.14455px 4.33852px 0px, rgb(255, 255, 255) -4.80686px 3.59083px 0px, rgb(255, 255, 255) -5.33596px 2.74364px 0px, rgb(255, 255, 255) -5.71718px 1.8204px 0px, rgb(255, 255, 255) -5.93995px 0.84672px 0px, rgb(255, 255, 255) -5.99811px -0.150428px 0px, rgb(255, 255, 255) -5.89004px -1.14341px 0px, rgb(255, 255, 255) -5.61874px -2.1047px 0px, rgb(255, 255, 255) -5.19172px -3.00766px 0px, rgb(255, 255, 255) -4.62082px -3.82727px 0px, rgb(255, 255, 255) -3.92186px -4.54081px 0px, rgb(255, 255, 255) -3.11421px -5.12852px 0px, rgb(255, 255, 255) -2.22026px -5.57409px 0px, rgb(255, 255, 255) -1.26477px -5.86518px 0px, rgb(255, 255, 255) -0.274238px -5.99373px 0px, rgb(255, 255, 255) 0.723898px -5.95617px 0px, rgb(255, 255, 255) 1.70197px -5.75355px 0px, rgb(255, 255, 255) 2.63288px -5.39147px 0px, rgb(255, 255, 255) 3.49082px -4.87998px 0px, rgb(255, 255, 255) 4.25202px -4.23324px 0px, rgb(255, 255, 255) 4.89538px -3.46919px 0px, rgb(255, 255, 255) 5.40307px -2.60899px 0px, rgb(255, 255, 255) 5.76102px -1.67649px 0px, rgb(255, 255, 255) 5.95932px -0.697531px 0px;
}
.conceptBlock .kaigo p, 
.conceptBlock .iryou p, 
.conceptBlock .sumai p {
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
	color: #000;
	line-height: 1.6;
	text-indent: -1em;
	padding-left: 1em;
}
.conceptBlock .kaigo p > span {
	color: var(--pink1);
	margin-right: 2px;
}
.conceptBlock .iryou p > span {
	color: var(--green1);
	margin-right: 2px;
}
.conceptBlock .sumai p > span {
	color: var(--yellow1);
	margin-right: 2px;
}

.conceptBlock .kaigo img, 
.conceptBlock .iryou img, 
.conceptBlock .sumai img {
	position: absolute;
	width: 100px;
	top: -25px;
	left: -25px;
	@media screen and (max-width:850px) {
		width: 80px;
		top: -15px;
		left: -15px;
	}	
}






/* # =================================================================
   facilityBlock
   # ================================================================= */
.facilityBlock {
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.facilityBlock h5 {
	font-weight: bold;
	font-size: 18px;
	font-size: 16px;
	font-size: clamp(1rem, 0.696rem + 0.57vw, 1.125rem);
}
.facilityBlock p {
	font-size: 16px;
	font-size: 14px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.5;
}
.facilityBlock ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.facilityBlock ul.floorMapBlock {
	margin-top: 20px;
	@media screen and (max-width:850px) {
		display: block;
	}
}
.facilityBlock ul.floorMapBlock li:nth-child(1) {
	width: 25%;
	@media screen and (max-width:850px) {
		width: 100%;
	}
}
.facilityBlock ul.floorMapBlock li:nth-child(1) p{
	font-size: 18px;
}
.facilityBlock ul.floorMapBlock li:nth-child(2) {
	width: 72%;
	padding-left: 3%;
	@media screen and (max-width:850px) {
		width: 100%;
		padding: 10px 0 30px 0;
	}
}
.facilityBlock ul.floorMapBlock li:nth-child(2) img {
	width: 100%;
}
.facilityBlock ul.floorMapBlock li h4 {
	margin-bottom: 15px;
}

.facilityBlock ul.photoBlock {
}
.facilityBlock ul.photoBlock li.wide {
	width: 100%;
	padding-bottom: 15px;
}
.facilityBlock ul.photoBlock li.photo {
	width: 30%;
	font-size: 16px;
	font-size: 14px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	padding-bottom: 20px;
	@media screen and (max-width:850px) {
		width: 48%;
		line-height: 1.5;
	}
}
.facilityBlock ul.photoBlock li.photoW {
	width: 48%;
	font-size: 16px;
	font-size: 14px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	padding-bottom: 20px;
	@media screen and (max-width:850px) {
		width: 100%;
		line-height: 1.5;
	}
}
.facilityBlock ul.photoBlock li.photo img, 
.facilityBlock ul.photoBlock li.photoW img {
	width: 100%;
	display: block;
}

.facilityBlock ul.typeBlock {
}
.facilityBlock ul.typeBlock li:nth-child(1) {
	width: 23%;
	@media screen and (max-width:850px) {
		width: 100%;
		text-align: center;
	}
}
.facilityBlock ul.typeBlock li:nth-child(1) img {
		width: 100%;
	@media screen and (max-width:850px) {
		width: 60%;
	}
}
.facilityBlock ul.typeBlock li:nth-child(2) {
	width: 75%;
	padding-left: 2%;
	@media screen and (max-width:850px) {
	width: 100%;
	padding: 0;
	}
}


    .room-table {
        width: 100%;
        border-collapse: collapse;
        font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
        font-size: 14px;
        color: #333;
        margin: 20px auto;
        @media screen and (max-width:850px) {
        	min-width: 800px;
        }
    }

    .room-table th, 
    .room-table td {
        border: 1px solid #000;
        padding: 12px 5px;
        text-align: center;
        vertical-align: middle;
    }

    /* 緑色のヘッダーセル（左列と上部） */
    .bg-green {
        background-color: #B5D686;
        font-weight: normal; /* 太字にしない */
    }

    /* 黄色のセル（A, C, Eタイプ） */
    .bg-yellow {
        background-color: #FFF3B0;
    }

    /* 白色のセル（B, D, Fタイプ） */
    .bg-white {
        background-color: #fff;
    }

    /* m2 の上付き文字調整 */
    sup {
        font-size: 0.7em;
        vertical-align: super;
    }
    
    /* スマホ用横スクロール */
    .table-wrapper {
        overflow-x: auto;
    }
/* # =================================================================
   # スクロールヒント 
   # ================================================================= */
.s-hint {
    position: relative;
    overflow-x: scroll;
/*	-ms-overflow-style: none;
	scrollbar-width: none;*/
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.scroll-indicator {
	display: none;
}
@media screen and (max-width:850px) {
/* スクロールヒントのスタイル */
.hide-scrollbar {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}
.hide-scrollbar::-webkit-scrollbar {
  display: block;
}
.scroll-indicator {
	display: block;
    opacity: 0.9;

    /* absoluteを使用し、スクロールヒントを中央配置 */
    position: absolute;
    left: 50%;
    top: 50%;

    /* クリックを無効化
    スクロールヒントがクリックの邪魔になる可能性があるため */
    pointer-events: none; 

    /* transitionを指定し、ゆっくりと非表示にする */
    transition: opacity 0.3s ,visibility 0.3s;
}

/* スクロールされた後もスクロールヒントが残っていると邪魔なため、
ある程度スクロールされたら非表示にする */
.scroll-indicator.is-scroll {
    visibility: hidden;
    opacity: 0;
}


.scroll-indicator-inr {
    font-size: 12px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px 10px;
    border-radius: 5px;
    display: flex;
    font-weight: bold;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeBlink 3s infinite ease-in-out;
}

.scroll-indicator-inr img {
    width: 50px;
}

/* スクロールヒントの点滅アニメーション */
@keyframes fadeBlink {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
}




/* # =================================================================
   serviceBlock
   # ================================================================= */
.serviceBlock {
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.serviceBlock p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.5;
}
.serviceBlock ul li h4 {
	margin-bottom: 15px;
	@media screen and (max-width:850px) {
	margin-bottom: 0px;
	}
}

.serviceBlock ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.serviceBlock ul.box1 {
	margin-top: 20px;
}
.serviceBlock ul.box1 li:nth-child(1) {
	width: 35%;
	padding-right: 2%;
	@media screen and (max-width:850px) {
	width: 100%;
	padding-right: 0%;
	}
}
.serviceBlock ul.box1 li:nth-child(2) {
	width: 63%;
	@media screen and (max-width:850px) {
	width: 100%;
	padding-top: 10px;
	}
}


.serviceBlock ul.box2 {
	margin-top: 30px;
}
.serviceBlock ul.box2 li:nth-child(1) {
	width: 45%;
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.serviceBlock ul.box2 li:nth-child(1) p {
	width: 80%;
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.serviceBlock ul.box2 li:nth-child(1) img {
	width: 80%;
	margin-top: 25px;
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.serviceBlock ul.box2 li:nth-child(2) {
	width: 55%;
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.serviceBlock ul.box2 li:nth-child(2) img {
	width: 90%;
	margin-top: -200px;
	@media screen and (max-width:850px) {
	width: 100%;
	margin-top: -80px;
	}
}

.serviceBlock ul.box3 {
	margin-top: 20px;
}
.serviceBlock ul.box3 li {
	width: 30%;
}
.serviceBlock ul.box3 li strong {
	display: block;
	font-size: 24px;
	text-align: center;
	padding: 5px 0 5px 0;
	color: #FFF;
	background-color: var(--pink3);
	letter-spacing: 0.2em;
	margin-bottom: 10px;
}
.serviceBlock ul.box3 li.wide {
	width: 100%;
	padding-bottom: 15px;
}
.serviceBlock ul.box3 li:nth-child(2) {
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.serviceBlock ul.box3 li.photo {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	@media screen and (max-width:850px) {
	width: 48%;
	}
}
.serviceBlock ul.box3 li.photo img {
	width: 100%;
	display: block;
}





/* # =================================================================
   priceBlock
   # ================================================================= */
.priceBlock {
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.priceBlock p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.5;
}
.priceBlock ul li h4 {
	margin-top: 30px;
	margin-bottom: 15px;
}
.priceBlock ul.box1 li.wide, 
.priceBlock ul.box2 li.wide {
	width: 100%;
	padding-bottom: 15px;
}
.priceBlock ul.box2 li.wide table {
	width: 30%;
	@media screen and (max-width:850px) {
	width: 60%;
	}
}
.priceBlock ul.box2 li.wide table th {
	background-color: #B5D686;
	text-align: center;
	border: 1px solid #000;
	padding: 5px;
}
.priceBlock ul.box2 li.wide table td {
	text-align: center;
	border: 1px solid #000;
	padding: 5px;
}


    /* テーブル全体のスタイル */
    .pricing-table {
        width: 100%;
        max-width: 1200px;
        border-collapse: collapse;
         font-size: 14px;
        color: #333;
        margin: 10px auto;
        @media screen and (max-width:850px) {
			min-width: 800px;
 		}
    }

    /* 全セルの共通設定 */
    .pricing-table th, 
    .pricing-table td {
        border: 1px solid #000;
        padding: 10px 5px;
        text-align: center;
        vertical-align: middle;
    }

    /* ヘッダー行（緑色） */
    .pricing-table thead th {
        background-color: #B5D686; /* 画像に近い緑色 */
        font-weight: normal;
        padding: 15px 5px;
    }

    /* 左上の斜線セル */
    .pricing-table .diagonal-header {
        background: #fff; /* 背景白 */
        position: relative;
        padding: 0;
        width: 80px;
    }
    /* CSSで斜線を描画 */
    .pricing-table .diagonal-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top right, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px));
    }

    /* 左側の区分列（要支援・要介護） */
    .pricing-table .row-header {
        width: 80px;
        font-weight: normal;
    }

    /* 金額の数字部分 */
    .pricing-table td {
        font-size: 16px;
        white-space: nowrap; /* 金額の折り返し防止 */
    }

    /* 中央の固定費エリア（白い背景・大きな文字） */
    .pricing-table .fixed-cost {
        background-color: #fff;
        font-size: 18px;
    }

    /* 奇数行の黄色背景 (要支援1, 要介護1,3,5) */
    .bg-yellow {
        background-color: #FFF3B0; /* 画像に近い黄色 */
    }

    /* 偶数行の白背景 (要支援2, 要介護2,4) */
    .bg-white {
        background-color: #fff;
    }

    /* スマホなどで横スクロールさせるためのラッパー */
    .table-wrapper {
        overflow-x: auto;
    }
    
    /* 注釈のサイズ調整 */
    small {
        font-size: 0.8em;
    }


/* # =================================================================
   flowBlock
   # ================================================================= */
.flowBlock {
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 0 auto;
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.flowBlock p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.5;
}
.flowBlock ul li {
	width: 100%;
	clear: both;
	position: relative;
	height: 150px;
	@media screen and (max-width:850px) {
	height: auto;
	padding-bottom: 50px;
	}
}
.flowBlock ul li.lastBox {
	@media screen and (max-width:850px) {
	padding-bottom: 0px;
	}
}
.flowBlock ul li h3 {
	border: 5px solid var(--green1);
	background: #FFF799;
	color: var(--green1);
	text-align: center;
	border-radius: 50px;
	font-weight: bold;
	padding: 10px;
	font-size: 24px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	width: 250px;
	float: left;
	position: relative;
	margin-right: 15px;
	@media screen and (max-width:850px) {
	width: 55%;
	margin-right: 0px;
	float: none;
	z-index: 10;
	}
}
.flowBlock ul li h3::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 25px solid transparent;
	border-left: 25px solid transparent;
	border-top: 30px solid var(--green1);
	border-bottom: 0;
	position: absolute;
	bottom: -60px;
	left:50%;
	margin-left: -30px;
	@media screen and (max-width:850px) {
	display: none;
	}
}
.flowBlock ul li h3.last::after {
	display: none;
}
.flowBlock ul li p {
	width: 400px;
	font-size: 18px;
	display: inline-block;
	@media screen and (max-width:850px) {
	font-size: 14px;
	width: 55%;
	margin-right: 0px;
	display: block;
	position: relative;
	}
}
@media screen and (max-width:850px) {
	.flowBlock ul li p::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 25px solid transparent;
	border-left: 25px solid transparent;
	border-top: 30px solid var(--green1);
	border-bottom: 0;
	position: absolute;
	bottom: -40px;
	left:50%;
	margin-left: -30px;
	}
	.flowBlock ul li.lastBox p::after {
	display: none;
	}
}
.flowBlock ul li img {
	position: absolute;
	right: 0;
	top: 0;
	width: 270px;
	@media screen and (max-width:850px) {
		width: 48%;
	}
}
.flowBlock ul li img.mg {
	margin-top: 70px;
}

/* # =================================================================
   recruitBlock
   # ================================================================= */
.recruitBlock {
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 0 auto;
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.recruitBlock p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.5;
}
.recruitBlock h2 {
	display: block;
	text-align: center;
	color: var(--base1);
	font-size: 50px;
	font-size: 34px;
	font-size: clamp(2.125rem, -0.304rem + 4.57vw, 3.125rem);
	font-weight: bold;
	font-family: "M PLUS Rounded 1c", sans-serif;
	letter-spacing: 0.1em;
}
.recruitBlock strong {
	display: block;
	text-align: center;
	font-size: 24px;
	font-family: "M PLUS Rounded 1c", sans-serif;
}
.recruitBlock h3 {
	display: block;
	width: 100%;
	text-align: left;
	color: var(--base1);
	font-size: 30px;
	font-size: 20px;
	font-size: clamp(1.25rem, -0.268rem + 2.86vw, 1.875rem);
	margin-top: 30px;
	font-weight: bold;
	font-family: "M PLUS Rounded 1c", sans-serif;
	letter-spacing: 0.05em;
}
.recruitBlock ul {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.recruitBlock ul li.wide {
	width: 100%;
	clear: both;
	position: relative;
}
.recruitBlock ul li.wide h4 {
	margin-bottom: 10px;
}
.recruitBlock ul li.link {
	width: 70%;
	padding-top: 15px;
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.recruitBlock ul li.link a {
	border: 5px solid var(--base1);
	background: #FFF;
	color: var(--base1);
	text-align: center;
	border-radius: 15px;
	font-weight: bold;
	padding: 20px;
	font-size: 20px;
	font-size: clamp(1.125rem, 0.821rem + 0.57vw, 1.25rem);
	font-family: "M PLUS Rounded 1c", sans-serif;
	width: 250px;
	float: left;
	position: relative;
	margin-right: 15px;
	clear: both;
	transition: all 0.5s;
	@media screen and (max-width:850px) {
	width: 50%;
	margin-right: 0px;
	padding: 15px 5px;
	}
}
.recruitBlock ul li.link a:hover {
	opacity: 1;
	background: #FFF799;
}
.recruitBlock ul li.link p {
	padding: 10px;
	display: inline-block;
	@media screen and (max-width:850px) {
	width: 48%;
	padding: 0px 0 0 2%;
	}
}
.recruitBlock ul li.link div {
	overflow: hidden;
	vertical-align: middle;
	margin-bottom: 25px;
}
.recruitBlock ul li.photo {
	width: 30%;
	@media screen and (max-width:850px) {
	width: 100%;
	}
}
.recruitBlock ul li.photo img {
	width: 100%;
	margin-bottom: 10px;
	@media screen and (max-width:850px) {
	width: 32%;
	}
}




/* # =================================================================
   priceBlock
   # ================================================================= */
.priceBlock {
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.priceBlock p {
	font-size: 16px;
	line-height: 1.5;
}
.priceBlock ul li h4 {
	margin-top: 30px;
	margin-bottom: 15px;
}
.priceBlock ul.box1 li.wide, 
.priceBlock ul.box2 li.wide {
	width: 100%;
	padding-bottom: 15px;
}



/* # =================================================================
   accessBlock
   # ================================================================= */
.accessBlock {
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.accessBlock p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.5;
}
.accessBlock ul {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	display: flex;
	@media screen and (max-width:850px) {
	display: block;
	}
}
.accessBlock ul li h4 {
	margin-top: 30px;
	margin-bottom: 15px;
}
.accessBlock ul li:nth-child(1) {
	width: 35%;
	padding-right: 5%;
	@media screen and (max-width:850px) {
	width: 100%;
	padding-right: 0%;
	}
}
.accessBlock ul li strong {
	display: block;
	margin-bottom: 10px;
}
.accessBlock ul li:nth-child(2) {
	width: 60%;
	padding-top: 30px;
	@media screen and (max-width:850px) {
	width: 96%;
	margin: 0 auto;
	padding-right: 0%;
	}
}
.accessBlock ul li:nth-child(2) img {
	width: 100%;
}
.accessBlock ul li h5 {
	display: inline-block;
	color: var(--blue1);
	border: 3px solid var(--blue1);
	border-radius: 30px;
	padding: 10px;
	margin: 10px 0 20px 0;
	font-weight: bold;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: 18px;
}
.accessBlock ul li span {
	display: block;
	background: #000;
	color: #FFF;
	text-align: center;
	padding: 10px 0;
	font-size: 18px;
	font-size: clamp(0.875rem, 0.268rem + 1.14vw, 1.125rem);
}


.accessBlock ul li a {
	display: block;
	background: var(--pink3);
	padding: 15px 0;
	text-align: center;
	border-radius: 10px;
	color: #FFF;
	position: relative;
	transition: all 0.5s;
}
.accessBlock ul li a::after {
	content: "＞";
	font-size: 16px;
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -8px;
	line-height: 1;
	color: #FFF;
}
.accessBlock ul li a:hover {
	background: var(--pink0);
}

/* # =================================================================
   privacyBlock
   # ================================================================= */
.privacyBlock {
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 0 auto;
	@media screen and (max-width:850px) {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
}
.privacyBlock p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.571rem + 0.57vw, 1rem);
	line-height: 1.8;
	text-indent: -1em;
	padding-left: 1em;
}
.privacyBlock ul li h4 {
	margin: 10px 0 5px 0;
	font-size: clamp(1rem, 0.393rem + 1.14vw, 1.25rem);
}