@charset "utf-8";

@font-face {
	font-family: 'LINESeedJPrg';
	src: url(../font/LINESeedJP_OTF_Eb.woff) format('woff');
	src: url(../font/LINESeedJP_TTF_Eb.ttf) format('truetype');
}

@font-face {
	font-family: 'LINESeedJPrg';
	src: url(../font/LINESeedJP_OTF_Rg.woff) format('woff');
	src: url(../font/LINESeedJP_TTF_Rg.ttf) format('truetype');
}

body {
	background: #fff;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
	color: #000;
}

h1,h2,h3,h4,h5 {
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}

a:hover {
	opacity: 0.8;
}

header {
	width: 100%;
	max-width: 100%;
	padding: 15px 10px 18px 10px;
	background: #fff;
	display: flex;
	justify-content: flex-end;
    position: fixed;
    top: 0;
}

header .header__inner-left {
	display: flex;
	align-items: center;
}

header h1.header__title.header-title {
	width: 156px;
}

header .header__inner-left p.h_txt {
	font-size: 18px;
	margin-left: 6px;
}

header .header__inner {
	width: 100%;
	max-width: 1400px;
	display: flex;
	justify-content: space-between;
}

header .header__inner-right {
	display: flex;
	align-items: center;
}

header .header__inner-right nav {
	margin-right: 20px;
}

header nav ul {
	padding: 0;
	flex-direction: unset;
}

header nav li {
	margin: 20px 0 20px 20px;
	font-family: tt-commons-pro, sans-serif;
	font-size: 18px;
	letter-spacing: 1px;
}

header nav li a {
	color: #000;
}


section {
	padding: 0;
}

section p {
	margin: 0;
	line-height: 1;
}

h1.ttl {
	margin: 1.8% 0;
	font-size: 48px;
	font-family: 'LINESeedJPrg';
	color: rgb(0, 0, 0);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 2px;
}

h1.ttl2 {
	font-size: 48px;
	color: rgb(255, 255, 255);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

p.sub-ttl {
	margin: 3.2% 0 0;
	font-size: 47px;
	font-family: tt-commons-pro, sans-serif;
	color: rgb(103, 152, 158);
	line-height: 1.2;
	text-align: center;
}

p.sub-ttl2 {
	margin: 1.1% 0 0;
	font-size: 26px;
	font-family: tt-commons-pro, sans-serif;
	color: rgb(208, 223, 224);
	line-height: 1.2;
	text-align: center;
}


main#recruit{
	margin-top: 118px;
}

@media screen and (max-width:768px) {
    body{
		background: #f9f7ec;
        font-size: calc(100vw * 12 / 500);
    }
    
    header{
        padding: 12px 2.4% 15px;
    }
    header h1.header__title.header-title{
        width: 43%;
    }
	header .header__inner-left{
		width: 57%;
	}
	header .header__inner-left p.h_txt{
	    font-size: 108%;
	}
	
    header .header__inner-right{
        display: none;
    }

    #nav-input:checked ~ #nav-content{
        display: block;
    }

    header nav li{
        font-size: 160%;
    }
    #nav-open{
        width: 50px;
    }

    #nav-open span{
        top: 28px;
        rotate: 180deg;
    }
    #nav-open span, #nav-open span:before, #nav-open span:after{
        width: 40px;
        height: 2px;
    }

    #nav-drawer{
        width: 50px;
        height: 50px;
            top: -8px;
    }

    #nav-open span:before{
		width: 77%;
        left: 4px;
    }

    #nav-content{
        width: 75%;
        padding: 20% 20% 0 0;
    }
    label#nav-open:after{
           content: 'MENU';
        bottom: -22px;
        position: absolute;
        display: inline-block;
        font-size: 16px;
    }

    #nav-input:checked ~ #nav-open span::before{
	        width: 40px;
            transform: rotate(45deg);
        left: -3px;
        bottom: -10px;
    }
    

	main{
	    padding: 0 0 5%;
	}

	main#recruit{
	    margin-top: 75px;
	}

    h1.ttl{
	    margin: 3.8% 0 5%;
		font-size: 267%;
    }
    h1.ttl2{
        font-size: 267%;
    }

	p.sub-ttl{
	    margin: 6.2% 0 0;
		font-size: 256%;
	}

	p.sub-ttl2{
		margin: 3.1% 0 0;
    	font-size: 145%;
	}

}



.mv {
	padding-bottom: 4%;
	background: url(../img/recruit/mv_bg.png)repeat-x bottom;
    background-size: 100% 80%;
	position: relative;
}

.mv picture {
	margin-left: 140px;
}

.mv h2 {
	margin: 3.4% 0 2.8%;
	font-family: tt-commons-pro, sans-serif;
	font-size: 40px;
	font-weight: 500;
	text-align: center;
	color: #d0dfe1;
	letter-spacing: 1px;
}

.mv p.intro_txt {
	text-align: center;
	font-size: 31px;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
}

.mv p.intro_txt2 {
	margin-top: 0.5%;
	text-align: center;
	font-size: 28px;
	line-height: 1.6;
	color: #fff;
}

.mv .arrow{
    width: 40px;
    transform: rotate(90deg);
    position: absolute;
    top: 10%;
    left: 3%;
}

.mv .arrow p {
    margin: 10px;
    padding: 0 0 0 10px;
	font-family: tt-commons-pro, sans-serif;
    font-size: 18px;
    padding-left: 5px;
    color: #d0dfe1;
}
.mv .arrow span {
  display: block;
width: 290px;
    height: 2px;
  background-color: #d0dfe1;
  position: relative;
  transform: scale(0, 1);
  transform-origin: top left;
  animation: arrow01 5s ease-in-out infinite forwards;
  writing-mode: vertical-lr;
}
@keyframes arrow01 {
    0% { transform: scale(0, 1); }
    30% { transform: scale(0, 1); }
    40% { transform: scale(1, 1); }
    85% { transform: scale(1, 1); opacity: 1;}
    90% { transform: scale(1, 1); opacity: 0; }
    100% { transform: scale(1, 1); opacity: 0; }
}
.mv .arrow span::after {
  content: "";
  display: block;
  width: 8px;
  height: 15px;
  border-right: 2px solid #d0dfe1;
  transform: rotate(-45deg) scale(1, 0);
  transform-origin: right bottom;
  position: absolute;
  bottom: 2px;
  right: 1px;
  animation: arrow02 5s ease-in-out infinite forwards;
}
@keyframes arrow02 {
    0% { transform: rotate(-45deg) scale(1, 0); }
    45% { transform: rotate(-45deg) scale(1, 0); }
    55% { transform: rotate(-45deg) scale(1, 1); }
    85% { transform: rotate(-45deg) scale(1, 1); opacity: 1;}
    90% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
    100% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
}

.mv summary{
    width: 170px;
    margin: 30px auto 0;
    padding: 10px;
	color: #fff;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50px;
    font-size: 20px;
}

.mv .content{
	width: 60%;
    margin: 15px auto 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
}

@media screen and (max-width:768px) {
	.mv{
		padding-bottom: 5%;
	}
	
	.mv .arrow{
		display: none;
	}

	.mv picture{
		margin-left: 0;
	}

	.mv h2{
	    margin: 7.4% 0 5.8%;
		font-size: 223%;
	}

	.mv p.intro_txt{
	    font-size: 178%;
	}
	.mv p.intro_txt2{
	    margin-top: 2.5%;
    	font-size: 155%;
	}

	.mv summary{
	    font-size: 150%;
	}
	.mv .content{
	    width: 80%;
		font-size: 140%;
	}
}

/* works */
section#works {}

section#works .inner {
	max-width: 1200%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

section#works .inner h1 {
	width: 100%;
	max-width: 664px;
	position: absolute;
	bottom: -15px;
	left: 190px;
}

section#works .inner p.txt {
	font-family: 'LINESeedJPrg';
	font-size: 62px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 9px;
}

section#works .inner p.txt span {
	font-family: tt-commons-pro, sans-serif;
	font-size: 140px;
	font-weight: normal;
	letter-spacing: 0;
}

section#works .inner .txt_block {
	width: 50%;
	padding-left: 10.8%;
	position: relative;
}

section#works .inner .txt_block .more_btn {
	width: 242px;
	margin-top: 46px;
	margin-left: 247px;
	font-family: tt-commons-pro, sans-serif;
	font-size: 20px;
	position: relative;
}

section#works .inner .txt_block .more_btn:after {
	content: '';
	display: block;
	background: url(../img/recruit/viewmore.png)no-repeat;
	background-size: 100%;
	width: 66px;
	height: 23px;
	position: absolute;
	right: -25px;
	top: 13px;
}

section#works .inner .txt_block .more_btn a {
	width: 100%;
	display: block;
	border: 1px solid #66989e;
	border-radius: 50px;
	text-align: center;
	padding: 12px 0 16px;
	color: #66989e;
}

section#works .inner .img_block {
	max-width: 597px;
	position: relative;
	right: -65px;
}

@media screen and (max-width:768px) {
	section#works {
    margin-bottom: 4.9%;
	}

	section#works .inner{
		display: block;
	}

	section#works .inner h1{
    width: 89%;
    position: relative;
    bottom: 0;
    left: 0;
	}
	section#works .inner .img_block{
    width: 80%;
    margin: 5% auto 3.1%;
    right: 0;
	}
	section#works .inner .txt_block{
	width: 100%;
    padding-left: 0;
    text-align: center;
	}
	section#works .inner p.txt{
		font-size: 345%;
	}
	section#works .inner p.txt span{
	    font-size: 225%;
	}

	section#works .inner .txt_block .more_btn{
		width: 100%;
	max-width: 150px;
    margin-top: 7.2%;
    margin-left: 51%;
    font-size: 122%;
	}

	section#works .inner .txt_block .more_btn a{
		    padding: 11px 0 11px;
	}

	section#works .inner .txt_block .more_btn:after{
		    width: 46px;
		    right: -25px;
    top: 10px;
	}
}

/* only */
section#only {
	scroll-margin-top: 116px;
	padding: 1px 0;
	background: url(../img/recruit/only_bg.png)repeat-x top;
	position: relative;
}

section#only h1.ttl rt {
	font-size: 20px;
	letter-spacing: 0;
}

section#only .only_block {
	max-width: 1140px;
	margin: 4% auto 0;
	display: flex;
	align-items: flex-start;
	column-gap: 40px;
	counter-reset: listnum;
}

section#only .only_block>div {
	width: 33%;
	max-width: 353px;
}

section#only .only_block>div .wrap {
	min-height: 47vh;
	padding: 6.1% 0.5% 80px;
	background: #fff;
	box-shadow: 0 0 10px 0px #ccc;
	border-radius: 20px;
}

section#only .only_block>div p.no {
	text-align: center;

	&::after {
		content: '';
		counter-increment: listnum;
		content: counter(listnum);
		font-size: 47px;
		font-family: tt-commons-pro, sans-serif;
		color: rgb(102, 152, 158);
		line-height: 1.2;

	}
	
}

section#only .only_block>div h2 {
	font-size: 24px;
	font-family: 'LINESeedJPrg';
	color: rgb(102, 152, 158);
	font-weight: bold;
	line-height: 1.43;
	text-align: center;
	letter-spacing: 0;
}

section#only .only_block>div p.txt {
	width: 94%;
	margin: 0 auto 6%;
	font-size: 18px;
	line-height: 1.6;
	display: flex;
	justify-content: center;
}

details {
	overflow: visible;
	height: 100%;

	/* --------アコーディオンの中身のスタイル-------- */
	&::details-content {
		transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
		height: 0;
		opacity: 0;
		overflow: clip;
	}

	/* --------アコーディオンの中身のスタイル（開いている時）-------- */
	&[open]::details-content {
		opacity: 1;
	}

	/* アコーディオンが開いた時のスタイル */
	&[open] .icon {
		transform: rotate(180deg);
	}
}

@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
		/* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
	}

	details[open]::details-content {
		height: 100%;
	}
}

@supports not (interpolate-size: allow-keywords) {
	details[open]::details-content {
		height: 100%;
	}
}

summary {
	display: grid;
	cursor: pointer;

	/* Safariで表示されるデフォルトの三角形アイコンを消します */
	&::-webkit-details-marker {
		display: none;
	}
}

/* --------アコーディオンの中身のスタイル-------- */
.content {
	background: none;
	overflow-y: hidden;
}

section#only .only_block summary {
	width: 240px;
	margin: 0 auto;
	padding: 10px 0;
	background: #d0dfe1;
	text-align: center;
	font-size: 21px;
	font-weight: 600;
	color: rgb(103, 152, 158);
	line-height: 1.6;
	border-radius: 15px;
}

section#only .only_block details {
	position: relative;
	top: -83px;

}

section#only .only_block details .content {
	margin-left: 28px;
	padding: 60px 0 0 13px;
	border-left: 1px solid #d0dfe1;
}

section#only .only_block details .content h3 {
    margin: 2.5% 0 0%;
    padding-bottom: 2.2%;
    padding-right: 20px;
    font-size: 24px;
    font-family: tt-commons-pro, sans-serif;
    color: rgb(102, 152, 158);
    line-height: 1.2;
    text-align: left;
    border-bottom: 1px solid #67989e;
    display: inline-block;
}

section#only .only_block details .content p {
    padding-bottom: 10px;
	font-size: 18px;
	line-height: 1.6;
}

@media screen and (max-width:768px) {
	section#only{
		scroll-margin-top: 75px;
	}

	section#only h1.ttl rt{
		font-size: 41%;
	}

	section#only .only_block{
		display: block;
	}
	section#only .only_block>div {
		width: 94%;
		margin: 0 auto;
		max-width: 710px;
	}

	section#only .only_block>div .wrap{
		min-height: auto;
        padding: 3.7% 0.5% 60px;
	}

	section#only .only_block>div .o_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
	}
	section#only .only_block>div p.no{
	    margin-right: 6%;
		&::after{
        font-size: 260%;
		}
	}
	section#only .only_block>div h2{
		font-size: 160%;
		text-align: left;

	}
	section#only .only_block>div p.txt{
		width: 70%;
		margin: 3.8% auto;
		font-size: 130%;
		line-height: 1.7;
		display: flex;
		justify-content: center;
	}

	section#only .only_block summary{
		width: 80%;
		max-width: 310px;
		margin: 0 auto 2.5%;
		padding: 13px 0;
		font-size: 134%;
		border-radius: 10px;
	}

	section#only .only_block details{
        top: -67px;
	}

	section#only .only_block details .content{
	    padding: 40px 0 0 13px;
	}
	section#only .only_block details .content h3{
	margin: 2.5% 0 0%;
    padding: 0 20px 1.9%;
    font-size: 156%;
	}
	section#only .only_block details .content p{
    margin-top: 3.8%;
    padding-bottom: 10px;
	    font-size: 138%;
	}
}

/* career */
section#career {
	scroll-margin-top: 116px;
	padding: 1px 0;
	background: url(../img/recruit/career_bg.webp)no-repeat center top;
	background-size: 100%;
}

section#career p.sub-ttl {
	margin: 2.6% 0 0;
}

section#career h1.ttl {
	margin: 1.1% 0 0;

	&::after {
		content: '';
		width: 1px;
		height: 62px;
		display: block;
		margin: 23px auto;
		background: #000;

	}
}

section#career p.txt {
	margin-bottom: 1.4%;
	font-size: 24px;
	line-height: 1.8;
	text-align: center;
}

section#career p.txt span {
	color: rgb(103, 152, 158);
	font-weight: 600;
}

section#career p.txt2 {
	margin-bottom: 3.3%;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
}


.career_block {
	margin-bottom: 5%;
	padding: 3% 0 3.4%;
	border-radius: 10px;
	position: relative;
	&:after{
        content: '';
        position: absolute;
        width: 1px;
        height: 50px;
        background: #28aab0;
        display: block;
        margin: 0 auto;
        left: 0;
        right: 0;
		bottom: -33px;
 }
}

.career_block:last-child::after{
	display: none;
	
}

.career_block:nth-child(odd){
	background: url(../img/recruit/career_block01-bg.png)repeat-y 40% top;
}
.career_block:nth-child(even){
	background: url(../img/recruit/career_block02-bg.png)repeat-y 60% top;
}

.career_block .career_box {
	max-width: 972px;
	margin: 0 auto;
	position: relative;
}

.career_block .career_box>div {
	padding: 5.5% 0% 2% 3%;
	background: #fff;
	display: flex;
	column-gap: 32px;
	border-radius: 10px;
}

.career_block .career_box .img_block {
	width: 50%;
	max-width: 446px;
}

.career_block .career_box .txt_block {
	width: 48%;
}

.career_block .career_box h2 {
	margin: 0;
	padding: 0 4px;
	background: #d0dfe1;
	font-size: 48px;
	font-weight: 600;
	color: rgb(103, 152, 158);
	line-height: 1.5;
	position: absolute;
	display: inline-block;
	top: -41px;
	letter-spacing: 0;
}

.career_block .career_box h3 {
	margin: 7.3% 0 1.8%;
	font-size: 26px;
	color: rgb(103, 152, 158);
	line-height: 1.6;
}

.career_block .career_box .txt_block p {
	font-size: 18px;
	line-height: 1.82;
}

.career_block .career_box summary {
    width: 240px;
    margin: 0 auto;
    padding: 10px 0;
    background: #d0dfe1;
    text-align: center;
    font-size: 21px;
    font-weight: 600;
    color: rgb(103, 152, 158);
    line-height: 1.6;
    border-radius: 15px;
    position: absolute;
    top: -13px;
    right: 130px;
    z-index: 1;
}

.career_block .career_box details {
    &[open] .icon {
        transform: rotate(90deg);
    }
}

.career_block .career_box summary .icon {
	background: url(../img/recruit/icon_arrow.png)no-repeat;
	background-size: 100%;
	width: 12px;
	height: 22px;
	display: block;
	transition: transform 0.4s;
    position: absolute;
    top: 16px;
    right: 19px;
}

.career_block .career_box details {
    position: relative;
    margin-top: -60px;
    page-break-after: always;
    left: -4px;
    padding-bottom: 40px;
}

.career_block .career_box details .content {
	margin-left: 54px;
	padding: 0px 0 0 13px;
	position: relative;

	&:before {
		content: '';
		width: 2px;
		background: #67989e;
		position: absolute;
		height: 100%;
		left: 0;
	}
}

.career_block .career_box details .content h3 {
	margin: 9.8% 0 2.2%;
    padding-bottom: 0.8%;
    padding-right: 9%;
    font-size: 24px;
    font-family: tt-commons-pro, sans-serif;
    color: rgb(102, 152, 158);
    line-height: 1.2;
    border-bottom: 1px solid #67989e;
    display: inline-block;
}

.career_block .career_box details .content p {
	font-size: 18px;
	line-height: 1.6;
	padding-bottom: 15px;
}

@media screen and (max-width:768px) {
	section#career{
		scroll-margin-top: 75px;
	}
	section#career p.sub-ttl{
		    margin: 5.1% 0 0;
	}
	section#career h1.ttl{
		margin: 2.6% 0 0;
		&::after{
	        margin: 23px auto 12px;
		}
	}

	section#career p.txt{
	    width: 90%;
        margin: 0 auto;
	    font-size: 133%;
		line-height: 1.95;
	}
	section#career p.txt2 {
		margin-top: 4.1%;
		margin-bottom: 9%;
		font-size: 172%;
		line-height: 1.6;
	}
	.career_block{
		margin-bottom: 11%;
		padding: 5.3% 0 6%;
		border-radius: 0;
	}

	.career_block:nth-child(odd){
	    background: url(../img/recruit/career_block01-bg.png) repeat-y 60% top;
	}
	.career_block:nth-child(even) {
		background: url(../img/recruit/career_block02-bg.png) repeat-y 40% top;
	}
	.career_block .career_box h2{
		padding: 0 18px 7px;
    	font-size: 261%;
	    top: -19px;
		left: -18px;
	}

	.career_block .career_box{
	    width: 91%;
	}

	.career_block .career_box>div{
	    padding: 9.2% 0% 15%;
		display: block;
	}

	.career_block .career_box .img_block{
		    width: 66%;
		margin: 0 auto;
		max-width: 446px;
	}
	.career_block .career_box .txt_block{
	    width: 92%;
		margin: 0 auto 8px;
	}
	.career_block .career_box h3{
		margin: 3.5% 0 2.6%;
    font-size: 155%;
	}
	.career_block .career_box .txt_block p{
		font-size: 145%;
	}
	

	.career_block .career_box summary{	
	    font-size: 130%;
        top: 6px;
		right: 0;
		left: 0;
        position: relative;
	    border-radius: 5px;
	}

	.career_block .career_box summary .icon{
		width: 7px;
    height: 14px;
	top: 14px;
	}
	
	.career_block .career_box details{
		width: 100%;
	    margin-top: -58px;
		position: relative;
		&[open]::after{
			content: '';
			width: 110%;
			height: 84%;
			background: #fff;
			display: block;
			position: absolute;
			bottom: 0;
            left: -30px;
		}
	}
	.career_block .career_box details .content{
		margin-left: 0px;
		padding: 9.5% 0 0 0%;
		position: relative;
		z-index: 1;
		
		&:before {display: none;}
	}
	.career_block .career_box details .content h3{
		    margin: 4.8% 0 0.8%;
		    padding-bottom: 2.8%;
		    padding-left: 7.8%;
		    font-size: 169%;
		    border-bottom: 1px solid #67989e;
		    display: block;
		    position: relative;
		&:before{
			content: '';
			display: block;
			width: 1px;
            height: 94px;
            background: #67989e;
            position: absolute;
            top: -215%;
            left: 14px;
		}
	}
	.career_block .career_box details .content p{
		font-size: 133%;
		line-height: 1.75;
		padding-left: 1%;
	}
}

section#guidelines {
    scroll-margin-top: 116px;
	padding: 3% 0;
	background: url(../img/recruit/Guidelines_bg.png) repeat-x top;
}

.guidelines_block {
	max-width: 1140px;
	margin: 3% auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
	counter-reset: listnum;
}

.guidelines_block>div {
	width: 33%;
	max-width: 353px;
	min-height: 376px;
	padding: 1.8% 1.3% 0.9%;
	background: #fff;
	box-shadow: 0 0 10px 0px #ccc;
	border-radius: 20px;
}

.guidelines_block>div:last-child ul.list {
	margin-top: 50px;
}

.guidelines_block>div p.no {
	text-align: center;

	&:after {
		content: '';
		counter-increment: listnum;
		content: counter(listnum);
		font-size: 47px;
		font-weight: 500;
		font-family: tt-commons-pro, sans-serif;
		color: #28aab0;
		line-height: 1.2;
	}
}

.guidelines_block>div h2 {
	font-size: 26px;
	line-height: 1.6;
	border-top: 3px dotted #28aab0;
	border-bottom: 3px dotted #28aab0;
	margin: 5.4% 0;
	padding: 1% 0 3%;
	font-weight: 600;
	letter-spacing: 1px;
}

.guidelines_block>div ul.list {
	max-width: 216px;
	margin: 0 auto 33px;
}

.guidelines_block>div ul.list li {
	margin-bottom: 25px;
	padding: 7px 0;
	background: #e7eff1;
	text-align: center;
	border-radius: 10px;
	font-size: 18px;
	line-height: 1.6;
}

.guidelines_block>div summary {
	width: 220px;
	margin: 0 auto;
	padding: 5px 0;
	background: #28aab0;
	text-align: center;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
	line-height: 1.6;
	border-radius: 10px;
	position: relative;
		&:after{
			content: '';
			background: url(../img/recruit/icon_arrow2.png)no-repeat top center;
			background-size: 100%;
			width: 16px;
			height: 10px;
			display: inline-block;
			position: absolute;
		        top: 16px;
	        right: 10px;
		}
}

.guidelines_block>div details {
	position: relative;

}

.guidelines_block>div details .content {
	margin: 29px 0 0;
	padding: 11px 10px;
	background: #d0dfe1;
	border-radius: 10px;
}

.guidelines_block>div details .content h3 {
	margin: 0 0 5px;
	font-size: 21px;
	font-family: "Hiragino Kaku Gothic ProN";
	color: rgb(0, 0, 0);
	line-height: 1.6;
}

.guidelines_block>div details .content h3 span {
	font-weight: normal;
	font-size: 18px;
}

.guidelines_block>div details .content h4 {
	font-size: 18px;
	font-family: "Hiragino Kaku Gothic ProN";
	color: rgb(0, 0, 0);
	line-height: 1.6;
}

.guidelines_block>div details .content p {
	font-size: 18px;
	line-height: 1.6;
}

.guidelines_block>div details .content hr {
	margin: 10px 0 10px;
	border-top: 3px dotted #28aab0;
	border-bottom: none;
}

.guidelines_block>div details .content ul {}

.guidelines_block>div details .content ul li {
	margin-bottom: ;
	font-size: 14px;
	line-height: 1.6;
	display: flex;

	&:before {
		content: '●';
		display: inline-block;
	}
}

@media screen and (max-width:768px) {
	section#guidelines{
		scroll-margin-top: 75px;
		padding: 5.9% 0 0.5%;
	}

	.guidelines_block{
	    display: block;
		margin: 7% auto 0;
	}
	.guidelines_block>div{
        width: 92%;
        max-width: 690px;
        min-height: 100%;
        margin: 0 auto 8.5%;
        padding: 1.8% 1.3% 4.9%;
	}

	.guidelines_block > div p.no {
    &:after {
        font-size: 240%;
    }
	}

	.guidelines_block>div h2{
	    width: 70%;
	    font-size: 180%;
    	margin: 3.1% auto 5.8%;
	}

	.guidelines_block>div ul.list{
		max-width: 506px;
		margin: 0 auto 33px;
		display: flex;
		justify-content: center;
		column-gap: 3%;
	}
	.guidelines_block>div ul.list li{
		width: 45%;
		margin-bottom: 0;
		padding: 7px 0;
		font-size: 153%;
		font-weight: 500;
		line-height: 1;
	}

	.guidelines_block>div summary{        
		width: 58%;
		max-width: 260px;
		padding: 8px 0;
		font-size: 150%;
		&:after{
			top: 13px;
		}

	}

	.guidelines_block>div details .content{
        width: 95%;
        margin: 5.6% auto 0;
        padding: 2.5% 6.7%;
	}

	.guidelines_block>div details .content h3{
	    margin: 0;
	    font-size: 180%;
	}
	.guidelines_block>div details .content h4{
		margin: 0.3% 0 2%;
		font-size: 145%;
	}
	.guidelines_block>div details .content p{
	    font-size: 138%;
	}

	.guidelines_block>div details .content ul{
	    margin: 1.5% 0;
	}
	.guidelines_block>div details .content ul li{
	    font-size: 130%;
	}
}

/* entry */
section#entry {
	background: #f9f7ec;
	padding: 1.8% 0 5%;
}

section#entry h1.ttl2 {
	color: #000;
}

section#entry p.sub-ttl2 {
	margin: 1.4% 0 2.2%;
	color: rgb(103, 152, 158);
}

section#entry .step_block {
	max-width: 891px;
	margin: 0 auto 30px;
	display: flex;
	align-items: normal;
}

section#entry .step_block .no {
	background: #ACDADF;
	writing-mode: vertical-lr;
	color: #fff;
	text-align: left;
	padding: 24px 24px;
	font-size: 18px;
	letter-spacing: 0;
	margin-right: 1px;
	border-radius: 20px 5px 5px 20px;
}

section#entry .step_block .inner {
	width: 100%;
	padding: 30px 10px 35px 0;
	background: #ACDADF;
	display: flex;
	align-items: center;
	border-radius: 5px 20px 20px 5px;

}

section#entry .step_block .inner .img_block {
	width: 30%;
	max-width: 159px;
	margin: 0 115px 0 70px;
}

section#entry .step_block .inner .txt_block {
	width: 70%;
	max-width: 440px;
	padding: 30px 10px 31px;
	background: #fff;
	border-radius: 8px;

}

section#entry .step_block .inner .txt_block h2 {
	margin: 0 auto 20px;
	font-size: 22px;
	font-weight: 600;
	color: rgb(103, 152, 158);
	line-height: 1.6;
}

section#entry .step_block .inner .txt_block p {
	font-size: 18px;
	line-height: 1.6;
	display: flex;
	justify-content: center;
}

@media screen and (max-width:768px) {
	section#entry{
	    padding: 5% 0 3.8%;
	}
	section#entry p.sub-ttl2{
		margin: 2.6% 0 4.2%;
	}
	section#entry .step_block{
		width: 97%;
		max-width: 730px;
		margin-bottom: 0 auto 2.6%;
	}

	section#entry .step_block .no{
	    font-size: 100%;
	    border-radius: 10px 5px 5px 10px;
		padding: 24px 3%;
	}

	section#entry .step_block .inner{
	    padding: 5% 10px 5% 0;
		border-radius: 5px 10px 10px 5px;
	}
	section#entry .step_block .inner .img_block{
		margin: 0 3%;
	}
	section#entry .step_block .inner .txt_block{
		padding: 1.4% 0 6%;
	}

	section#entry .step_block .inner .txt_block h2{
		    margin: 0 auto 1.6%;
		    font-size: 168%;
	}

	section#entry .step_block .inner .txt_block p{
		width: 86%;
		margin: 0 auto;
		font-size: 144%;
		line-height: 1.6;
	}

}


/* column */
section#column {
	max-width: 1120px;
	scroll-margin-top: 116px;
	margin: -4.2% auto 7.2%;
	padding: 36px 0 28px;
	background: #fff url(../img/recruit/column_bg.png)no-repeat top center;
	box-shadow: 0 0 10px 0px #ccc;
}

section#column h1 {
	margin-bottom: 23px;
	font-size: 31px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;

}

section#column .colmn_wrap {
	display: flex;
	padding: 0 63px;
}

section#column .colmn_wrap article {
	width: 33%;
}

section#column .colmn_wrap article .img_block {
	width: 100%;
	height: 200px;
	margin-bottom: 20px;
}

section#column .colmn_wrap article .img_block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

section#column .colmn_wrap article time.date {
	margin: 6px 0 10px 6px;
	display: flex;
	font-size: 16px;
	font-family: tt-commons-pro, sans-serif;
	color: rgb(102, 152, 158);
	line-height: 1.2;
}

section#column .colmn_wrap article time.date>span {
	width: 12px;
	margin-right: 10px;
	display: block;
}

section#column .colmn_wrap article h2 {
	margin: 0 0 10px;
	font-size: 20px;
	color: rgb(40, 170, 176);
	line-height: 1.6;
	text-align: left;
	letter-spacing: 0;
	font-weight: 500;
}

section#column .colmn_wrap article p {
	width: 92%;
	font-size: 16px;
	line-height: 1.6;
}

section#column .colmn_wrap article .more_btn {
	width: 150px;
	margin: 32px auto 0;
	font-family: tt-commons-pro, sans-serif;
	font-size: 18px;
	position: relative;
}

section#column .colmn_wrap article .more_btn:after {
	content: '';
	display: block;
	background: url(../img/recruit/viewmore.png) no-repeat;
	background-size: 100%;
	width: 41px;
	height: 18px;
	position: absolute;
	right: -16px;
	top: 9px;
}

section#column .colmn_wrap article .more_btn a {
	width: 100%;
	display: block;
	border: 1px solid #66989e;
	border-radius: 50px;
	text-align: center;
	padding: 6px 0 8px;
	color: #66989e;
}

@media screen and (max-width:768px) {
	section#column{
		width: 98%;
		scroll-margin-top: 75px;
	    margin: 0 auto 7.2%;
		padding: 5% 0 1px;
		background: #fff url(../img/recruit/column_bg-sp.png) no-repeat top center;
		background-size: 100%;
	}

	section#column h1{
	    margin-bottom: 9%;
	    font-size: 180%;
	}
	

	section#column .colmn_wrap{
	    padding: 0 4% 1px;
	    display: block;
	}	
	section#column .colmn_wrap article{
        width: 100%;
        margin-bottom: 10%;
        display: flex;
        column-gap: 24px;
	}

	section#column .left_block{
	    width: 43%;
    max-width: 290px;
	}
	section#column .colmn_wrap article .img_block{
	    height: 75%;
	    margin-bottom: 10px;
	}

	section#column .txt_block{
		width: 55%;
	}

	section#column .colmn_wrap article h2{
		margin-bottom: 2px;
		font-size: 145%;
	}

	section#column .colmn_wrap article p{
	    width: 100%;
    font-size: 120%;
    line-height: 1.6;
	}

	section#column .colmn_wrap article .more_btn{
		width: 50%;
        max-width: 160px;
        margin: 5% 0 0 40%;
        font-size: 100%;
	}

	section#column .colmn_wrap article .more_btn:after{
	    width: 31px;
	    top: 6px;
	}

}

section#insta {
	max-width: 980px;
	margin: 0 auto 8.5%;
}
@media screen and (max-width:768px) {
	section#insta{
	    width: 87%;
	}
}

section#faq {
  margin-bottom: 2.4%;
	padding: 1px;
	background: url(../img/recruit/faq_bg.png) repeat-x top;
}

section#faq h1.ttl {
	margin-bottom: 3.6%;
}

section#faq details {
	max-width: 980px;
	margin: 0 auto 2%;

	&[open] .icon {
		&::after {
			transform: rotate(0);
		}
	}
}

section#faq details summary {
	background: #fff;
	box-shadow: 0 0 10px 0px #ccc;
	border-radius: 10px;
	padding: 17px 10px 27px 23px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

section#faq details summary span {
	font-size: 26px;
	font-weight: 500;
	color: rgb(102, 152, 158);
	line-height: 1.6;
	display: flex;
	align-items: center;
	position: relative;

	&:before {
		content: 'Q';
		font-size: 47px;
		font-family: tt-commons-pro, sans-serif;
		color: rgb(102, 152, 158);
		line-height: 1.2;
		display: inline-block;
		margin-right: 25px;
	}

}

section#faq details summary .icon {
	display: block;
	position: relative;
	width: 24px;
	transform-origin: center 43%;
	transition: transform 0.4s;

	/* アイコンのバーのスタイル */
	&::before,
	&::after {
		content: "";
		position: absolute;
		display: block;
		width: 23px;
		height: 4px;
		background-color: #66989e;
	}

	&::before {
		left: 2px;
		transform: rotate(0);
	}

	&::after {
		right: 0;
		transform: rotate(90deg);
	}
}

section#faq details .content {
	background: none;
	background: #e7eff1;
	padding: 28px 10px 26px;
	border-radius: 0 0 10px 10px;
	margin-top: -6px;
}

section#faq details .content p {
	font-size: 18px;
	line-height: 1.6;
	display: flex;
	column-gap: 20px;

	&:before{
		content: '';
		background: url(../img/recruit/faq_q_icon.png)no-repeat;
		background-size: 100%;
		width: 22px;
		height: 23px;
		display: block;
	}
}
section#faq details .content p span{
	width: 98%;
}

@media screen and (max-width:768px) {
	section#faq h1.ttl {
		margin-bottom: 7.6%;
	}

	section#faq details{
	    width: 98%;
		margin: 0 auto 5%;
	}

	section#faq details summary span {
	    font-size: 144%;
        &:before {
			font-size: 181%;
		}
	}
	section#faq details .content{
        padding: 2.5% 5% 2%;
	}
	section#faq details .content p{
        font-size: 144%;
	}

	section#faq details summary{
		padding: 3% 10px 3% 23px;
	}

	section#faq details summary .icon{
		width: 21px;
		&::before, &::after{
		width: 20px;
		height: 3px;
		}
	}

	section#faq details .content p{
	    column-gap: 10px;
		&:before {
        width: 19px;
        height: 19px;
		}
	}
}

aside.entry_block {
  width: 100%;
  max-width: 1074px;
    margin: 0 auto 5.7%;
  padding: 8px 6px;
  background: url(../img/recruit/entry_bg.png)no-repeat;
  background-size: 100%;
      border-radius: 10px;

}

aside.entry_block .inner {
    padding: 4.3% 0 3.6%;
    border: 1px solid #fff;
    border-radius: 10px;
    text-align: center;
}

aside.entry_block .inner p.txt{
      margin-bottom: 5px;
    font-size: 20px;
	font-family: 'LINESeedJPrg';
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.6;
}
aside.entry_block .inner p.txt2{
      margin-bottom: 3.4%;
    font-size: 31px;
	font-family: 'LINESeedJPrg';
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.6;
}

.entry_block{
      width: 440px;
    margin: 0 auto;
}
.entry_block a{
  width: 100%;
  padding: 21px 0 25px;
  display: block;
  background: #c6b27b;
  box-shadow: 0 7px #e3d9be;
  color: #625344;
  font-size: 31px;
  font-weight: 500;
  border-radius: 20px;
}

@media screen and (max-width:768px) {
	aside.entry_block{
	    width: 97%;
		background-size: cover;
	}
	aside.entry_block .inner{
		padding: 2.4% 0 3.6%;
	}

	aside.entry_block .inner p.txt{
        margin-bottom: 1.4%;
	    font-size: 122%;
	}

	aside.entry_block .inner p.txt2{
		margin-bottom: 6.4%;
    	font-size: 144%;
	}

	.entry_block{
		width: 80%;
    	max-width: 440px;
	}
	.entry_block a{
	    padding: 4% 0 5%;
	    font-size: 172%;
		border-radius: 10px;
	}
}

.footer_reserve a{
    max-width: 250px;
    background: #67989e;
    font-size: 20px;
    box-shadow: 0 7px #acdadf;
}

.footer_reserve a:nth-child(3):before{
  display: none;
}

.footer_reserve a:nth-child(3){
  padding: 10px 15px;
}

.footer_reserve .entry_block{
  width: 395px;
  margin: 0;
}
.footer_reserve .entry_block a{
  max-width: 100%;
  background: #c6b27b;
  box-shadow: 0 7px #e3d9be;
  color: #625344;
}

ul.nav_insta li:nth-child(2){display: none;}

.footer_info .pc_qr{display: none!important;}

@media screen and (max-width:768px) {
	footer .logo{
		width: 110px;
        margin: 0 auto 5%;
	}

	.footer_info > div > div{
		display: flex;
	}

	.footer_info > div > div.colmun3 {
    	display: block;
	}

	.footer_reserve > a{
		width: 30%;
	}
	
	.footer_reserve{
		flex-wrap: wrap;
	}

	.footer_reserve a{
		padding: 5px 0px;
		font-size: 155%;
		box-shadow: 0 4px #acdadf;
	}
	.footer_reserve a:nth-child(3){
		padding: 5px 15px;
	}

	.footer_reserve .entry_block{
		width: 90%;
		margin: 3% 0 2%;
	}
	.footer_reserve .entry_block a{
		padding: 10px 0;		
		font-size: 165%;
	}

	.footer_info .recruit,
	.footer_info .phone{
		display: none;
	}

	.footer_info .contact,
	.footer_info .sns{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.footer_info .contact strong,
	.footer_info .sns strong{
		width: 30%;
		margin-right: 10px;
	} 

	.footer_info .sns > div{
	    display: block;
	    width: 80%;
	}
	

}