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

@media (max-width: 700px) {
#mv{
    background-image: url(../images/mv_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding-top: 56.15%;
    padding-bottom: 10%;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#mv_catch {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 80%;
    z-index: 999;

}
#mv_catch img {

}
#slider {
    width: 100%;
}
#slider img {
    width: 100%;
}


    #top_news {
        padding-top: 32px;
        background-image: url(../images/kairo_bg_3.svg);
        background-repeat: no-repeat;
        background-position: right -69.23% top -15.38%;
        background-size: 75.38% auto;
    }
#top_news ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
}
#top_news ul li{
	width: 100%;
	margin-right:0;
	font-size: 16px;
	box-sizing: border-box;
	margin-bottom: 20px;
}
#top_news ul li:last-child{
	margin-right: 0;
}
#top_news ul li p{
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1em;
	font-weight: 500;
	margin-bottom: 12px;
	color: #009450;
}
.top_news_thumb {
	box-sizing: border-box;
    width: 100%;
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
    margin-bottom: 10px;
}

#top_news ul li h3{
    font-size: 15px;
    line-height: 1.6em;
    font-weight: 500;
}

            #top_about-products {
        background-image: url(../images/kairo_bg_1.svg);
        background-position: left -73% top 13%;
        background-size: 150% auto;
        background-repeat: no-repeat;
        padding-top: 6.15%;
    }
#top_about{
	margin-bottom: 24px;
}
#top_about .content_wrap{
	display: flex;
	justify-content: space-between;
	padding-bottom: 6.15%;
	flex-direction: column;
}
#top_about_L{
	width: 100%;
  overflow: visible;
}
#top_about_txt{
    margin-top: 16px;
    padding-left: 0;
	margin-bottom: 20px;
}
#top_about_txt p{
	font-size: 16px;
	line-height: 1.8em;
	font-weight: 500;
}
#top_about_img{
	width: 100%;
}
#top_about_img img{
	width: 100%;
	-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
}


#top_products{
    padding-bottom: 13.84%;
    background-image: url("../images/kairo_bg_2.svg");
    background-position: center bottom;
    background-size: 664px auto;
    background-repeat: repeat-x;
}
#top_products ul{
	display: flex;
	flex-wrap: wrap;
	padding-top: 24px;
}
#top_products ul li{
    box-sizing: border-box;
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    background-image: url("../images/top_pro_1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-bottom: 6px solid #009450;
    color: #FFFFFF;
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.50);
}
#top_products ul li:nth-child(2){
	background-image: url("../images/top_pro_2.png");
}
#top_products ul li:nth-child(3){
	background-image: url("../images/top_pro_3.png");
}
#top_products ul li:nth-child(4){
	background-image: url("../images/top_pro_4.png");
}
#top_products ul li:nth-child(5){
	background-image: url("../images/top_pro_5.png");
}
#top_products ul li:nth-child(6){
	background-image: url("../images/top_pro_6.png");
}
#top_products ul li:nth-child(3n){
	margin-right: 0;
}
#top_products ul li h2{
    font-size: 18px;
    line-height: 1em;
    font-weight: 600;
    margin-bottom: 10px;
}
#top_products ul li p{
	font-size: 15px;
	line-height: 1.5em;
	font-weight: 500;
	box-sizing: border-box;
}
#top_products ul li a{
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	min-height: 216px;
	display: flex;
}
.top_products_txt{
    margin-top: auto;
}


#top_proven{
    padding-bottom:4.61%;
    margin-bottom: 10.76%;
    background-image: url("../images/top_proven_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#top_proven_ue-p{
    font-family: "Anton", sans-serif;
    font-size: 56px;
    line-height: 1em;
    font-weight: 500;
    transform: translateY(-40.76%);
}
#top_proven_ue-p span{
	background: linear-gradient(64deg, #009687 40%, #00964B 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#top_proven_img{
	width: 100%;
}
#top_proven_img img{
	width: 100%;
}
#top_proven_sita-p{
	text-align: right;
	font-family: "Anton", sans-serif;
	font-size: 28px;
	line-height: 1em;
	font-weight: 500;
	color: #FFFFFF;
	    transform: translateY(-40.76%);
}


#top_strengths{
    padding-bottom: 9.23%;
	
}
#top_strengths .h2_h2{
    padding-left: 6.15%;
    margin-bottom: 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.top_str_each {
    position: relative;
    width: 100%;
    /*
	padding-bottom: 6.15%;
    padding-top: 6.15%; 
*/
    /* [disabled]position: relative; */
    z-index: 0;
    margin-bottom: 8.46%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F1D5D6;
}
.top_str_each::before {
        content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 84.61%;
    background-color: #F7F8FB;
    z-index: -1;
    height: 90%;
}
/* 画像（右上に絶対配置。背面） */
.top_str_img {
    width: 58.46%;
    position: absolute;
    top: -30%;
    right: 0;
    z-index: 1; /* 背面に */
}

.top_str_img img {
    width: 100%;
    height: auto;
}
/* テキスト（左に配置。画像の上に重なる） */
.top_str_txt {
    width: 46.15%;
    position: relative; /* relative でも z-index 指定できる */
    z-index: 2; /* 前面に */
    padding-top: 6.15%;
    padding-right: 3.84%;
    padding-bottom: 7.69%;
    padding-left: 13.84%;
    background-color: #FFFFFF;
    background-image: url("../images/top_strengths_suuji01.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 28.46% auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.top_str_txt:nth-child(2){
	background-image: url("../images/top_strengths_suuji02.svg");
}
.top_str_txt:nth-child(3){
	background-image: url("../images/top_strengths_suuji03.svg");
}
.top_str_img img {
    width: 100%;
    -webkit-box-shadow: 0px 0px 8px #8C8C8C;
    box-shadow: 0px 0px 8px #8C8C8C;
}
.top_str_txt p {
    line-height: 2em;
    font-weight: 400;
    font-size: 15px;
}
#top_strengths h3{
    font-size: 34px;
    line-height: 1.4em;
    font-weight: 600;
    margin-bottom: 4.61%;
}






.strength-each {
    position: relative;
}

.strength-each::before {
    content: "";
    position: absolute;
    top: 4.61%;
    left: 0;
    width: 88.46%;
    background-color: #F7F8FB;
    height: 63.07%;
    z-index: -1;
}
.strength-each:nth-of-type(2) {
    margin-top: 0%;
}
.strength-each:nth-of-type(3) {
    margin-top: 0%;
}

.strength-cont {
    display: flex;
    align-items: flex-start; /* 上下を揃える基準を決める（後でズラす） */
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column-reverse;
}
.strength-text-wrap {
    width: 93.85%;
    display: flex;
    margin-top: -24px;
    margin-right: 0%;
    justify-content: flex-start;
    position: relative;
    min-height: 0px;
}
.strength-number_wrap {
    position: absolute;
    top: 16px;
    left: 4.61%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.strength-number_wrap p {
    font-size: 32px;
    letter-spacing: 4px;
    margin-top: 0px;
    width: 32px;
    z-index: 1002;
}
.strength-number_wrap p .cc1 {
    color: #dcdfe0;
}
.strength-number_wrap p .cc2 {
	background: linear-gradient(48deg, #009687 30%, #00964C 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.strength-num-border  {
    height: 100%;
    /* [disabled]background-color: #DF97DE; */
    display: block;
    z-index: 1002;
}


.strength-text-box {
    background-color: #FFFFFF;
    padding-top: 9.23%;
    padding-right: 5.38%;
    padding-left: 17.69%;
    padding-bottom: 9.23%;    /* 少し下にずらす */
    z-index: 1;
    background-image: url("../images/top_strengths_suuji01.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 96px auto;
    margin-bottom: 0px;
}

.strength-each:nth-of-type(2) .strength-text-box {
	background-image: url("../images/top_strengths_suuji02.svg");
}
.strength-each:nth-of-type(3) .strength-text-box {
    background-image: url("../images/top_strengths_suuji03.svg");
    margin-bottom: 0%;
}


.strength-text-box h2 {
    font-size: 22px;
    margin-bottom: 16px;
    line-height: 1.5em;
}
.strength-text-box p {
    line-height: 1.6em;
    font-weight: 500;
    font-size: 16px;
}
.strength-image-box {
    width: 93.85%;
    margin-left: auto;
}



.strength-image-box img {
    display: block;   /* 少し上にずらす */
    -webkit-box-shadow: 0px 0px 16px #AFAFAF;
    box-shadow: 0px 0px 16px #AFAFAF;
}


/* 縦線を完全に外出しレイヤー化 */
.vertical-border {
    position: relative;
    height: 87%;
}
.vertical-border::before {
    content: "";
    position: absolute;
    left: 50%; /* 中央基準 */
    transform: translateX(-50%); /* 自分の幅の半分分戻す */
    width: 0.05em; /* 線の太さ */
    background-color: #002236;
    height: 100%;
}


/* 縦線の重なり順 */
.strength-each:nth-of-type(1) .vertical-border { 
    z-index: 3; 
    position: relative;
}
.strength-each:nth-of-type(2) .vertical-border { 
    z-index: 5; 
    position: relative;
}
.strength-each:nth-of-type(3) .vertical-border {
    z-index: 7;
    position: relative;
}


/* 1番目 */
.strength-each:nth-of-type(1) .strength-text-box { z-index: 2; position: relative; }
.strength-each:nth-of-type(1) .strength-image-box { z-index: 1; position: relative; }

/* 2番目 */
.strength-each:nth-of-type(2) .strength-text-box { z-index: 4; position: relative; }
.strength-each:nth-of-type(2) .strength-image-box { z-index: 3; position: relative; }

/* 3番目 */
.strength-each:nth-of-type(3) .strength-text-box {
    z-index: 6;
    position: relative;
    margin-bottom: 0px;
}
.strength-each:nth-of-type(3) .strength-image-box { z-index: 5; position: relative; }


@media screen and (min-width: 1400px) {
.strength-each:nth-of-type(2) {
    margin-top: -120px;
}
.strength-each:nth-of-type(3) {
    margin-top: -120px;
}
}


#omakase{
	box-sizing: border-box;
	background-image: url("../images/omakase_eng.svg"),url("../images/character_1.png"),url("../images/omakase_bg.png"),url("../images/omakase_bg_sp.png");
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	background-position: right 5.38% top 2.3%,right 3.84% bottom 2.3%,right top,center center;
	background-size: 136px auto,24.61% auto,0,auto 100%;
	padding-top: 13.84%;
	padding-bottom: 10%;
}
#omakase_img-txt{
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
#omakase_img{
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 18px;
}
#omakase_img img{
	box-sizing: border-box;
	width: 100%;
	box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.56);
}
#omakase h2{
	box-sizing: border-box;
	font-size: 24px;
	line-height: 1.5em;
	font-weight: 600;
	margin-bottom: 20px;
	color:#FFFFFF;
	text-shadow: 2px 2px 16px rgba(0, 0, 0, 0.72);
}
#omakase_txt{
	box-sizing: border-box;
	width: 100%;
}
#omakase_txt p{
	box-sizing: border-box;
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.5em;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	align-items: baseline;
}
#omakase_txt .bg_white{
	box-sizing: border-box;
	background-color: #FFFFFF;
	padding-top: 8px;
	padding-right: 10px;
	padding-left: 9px;
	padding-bottom: 9px;
	display: inline-block;
}
	#omakase_txt .pt0{
		padding-top: 0;
	}


#top_recruit{
    padding-top: 10.76%;
    padding-bottom: 11.53%;
    background-image: url("../images/kairo_bg_3.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 41.53% auto;
}
#top_recruit_catch{
	margin-top: 20px;
	margin-bottom: 24px;
	font-size: 17px;
	line-height: 1.6em;
	font-weight: 500;
}
#top_recruit ul{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 4.61%;
}
#top_recruit ul li{
	width: 100%;
	margin-right: 0;
	margin-bottom: 20px;
}
#top_recruit ul li:last-child{
	margin-right: 0;
}
#top_recruit ul li a{
    display: block;
    border-bottom: 5px solid #009450;
    align-items: flex-end;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.56);
    position: relative;
}
.top_recruit_txt{
    margin-bottom: 14px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}
.top_recruit_job{
	font-size: 13px;
	line-height: 1em;
	font-weight: 500;
	padding: 4px 8px;
	background-color: #FFFFFF;
	margin-bottom: 10px;
	display: inline-block;
}
.top_recruit_name{
	color: #FFFFFF;
	font-size: 20px;
	line-height: 1em;
	font-weight: 500;
	padding-left: 8px;
	text-shadow: 2px 2px 16px rgba(0, 0, 0, 0.72);
}
#top_recruit_bottom{
/*	background-color: #F7F8FB;*/
/*
	padding-top: 23.07%;
	margin-top: -22.3%;
*/
}

/*
#top_news{
	padding-top: 8.46%;
	padding-bottom: 6.15%;
	background-image: url("../images/bg_gaikan.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
}
#top_news_in{
	margin-top: 8.46%;
	background-color: rgb(255 255 255 / 80%);
	padding: 3.84% 4.61%;
	padding-bottom: 5.38%;
	box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.40);
	border-bottom: 6px solid #009450;
}
#top_news ul{
    margin-right: auto;
    margin-left: auto;
}
#top_news ul li{
	display: flex;
	align-items: center;
	border-bottom: 2px dotted #009450;
	    padding-left: 4px;
}
#top_news ul li a{
	display: block;
	background-image: url("../images/arrow_black.svg");
	background-repeat: no-repeat;
	background-size: 56px auto;
	background-position: right center;
	padding-right: 72px;
}
#top_news ul li .top_news_day{
	font-size: 16px;
	line-height: 1em;
	font-weight: 500;
	color: #009450;
}
#top_news ul li h3{
	width: 100%;
	font-size: 16px;
	line-height: 1.5em;
	font-weight: 500;
	margin-left: 32px;
	margin-right: 6px;
	padding-top: 16px;
	padding-bottom: 16px;
}*/
}