@charset "utf-8";
/*
Theme Name: SunGreenFleshOKINAWA
Description: SunGreenFleshOKINAWA Template
*/
.blue_bg{
	background-color: #008DD2;
	color: #FFFFFF;
}
.sky_bg{
	background: #E0F7FA;
}
.flex{
	display: flex;
	justify-content: center;
	align-items: center;
}
.isSP{
	display: none;
}
@media (max-width: 768px){
	.isPC{
		display: none;
	}
	.isSP{
		display: block;
	}
	.flex{
		flex-direction: column;
	}
}

header{
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	z-index: 10000;
}

.header-inner{
	margin-left: 5%;
	justify-content: space-between;
}

.header-inner .header-logo{
	width: 21%;
	height: auto;
}

.menu{
	margin: 0;
}

.menu li {
    margin-left: 20px;
}

.menu li:nth-last-child(1){
	padding: clamp(17.1px, 0.024px + 2.221vw, 32px) clamp(12.8px, -0.036px + 1.669vw, 24px);
}

.menu a {
    text-decoration: none;
	font-size: clamp(16px, 11.416px + 0.596vw, 20px);
}

/* ハンバーガーメニュー（PCでは非表示） */
.hamburger {
    display: none;
    cursor: pointer;
	position: absolute;
	right: 5%;
}

.hamburger .bar {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #008DD2;
    margin: 5px 0;
    transition: all 0.3s;
	border-radius: 5px;
}

/* スマホ（SP）の場合 */
@media screen and (max-width: 768px) {
    /* メニューを非表示に */
    .menu {
        display: none;
        position: absolute;
        top: 49.33px;
        right: 0;
        background-color: #FFF;
        border-bottom-left-radius: 24px;
        padding: 20px;
        flex-direction: column;
        width: 200px;
    }

    /* ハンバーガーメニューアイコンを表示 */
    .hamburger {
        display: block;
    }

    /* メニューを表示するために右にスライド */
    .menu.show {
        display: flex;
    }

    /* ハンバーガーメニューのバーを×に変える */
    .hamburger.open .bar:nth-child(1) {
        transform: rotate(45deg);
        position: relative;
        top: 9px;
    }

    .hamburger.open .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open .bar:nth-child(3) {
        transform: rotate(-45deg);
        position: relative;
        top: -9px;
    }

    /* メニュー項目のスタイル（スマホ用） */
    .menu li {
        margin: 15px 0;
        text-align: center;
    }
	.header-inner{
		flex-direction: row;
		padding: 8px 0;
	}
	.header-inner .header-logo{
		width: 60%;
		max-width: 200px;
	}
}

#fv{
	width: 100%;
	height: 100vh;
	padding-top: clamp(62.11px, 23.270px + 5.051vw, 96px);
}
.swiper{
	height: 100%;
	width: 100%;
}
.swiper img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}
.inner{
	padding: clamp(64px, 40.229px + 6.095vw, 128px) 0;
	width: 90%;
	max-width: 1280px;
	margin: auto;
}
.h2_area hr{
	width: 88px;
	height: 2px;
	background-color: #2E9143;
	border-color: #2E9143;
}
.h2_area p{
	text-align: center;
}
.inner-contents{
	margin: clamp(32px, 20.114px + 3.048vw, 64px) auto;
	gap: clamp(20px, 12.571px + 1.905vw, 40px);
}
.inner-contents > *{
	width: 50%;
}
.inner *{
	margin-left: auto;
	margin-right: auto;
}
.chara-img{
	width: 25%;
	height: auto;
}
.chara-text{
	text-align: center;
}
.inner-products{
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 7.543px + 1.143vw, 24px);
}
.inner-products h3{
	border-radius: 12px;
	background: #FFF;
	text-align: center;
	width: 100%;
	padding-top: 6px;
	padding-bottom: 6px;
}
.under-link{
	padding: 8px 12px;
	gap: 8px;
	font-weight: 700;
	border-bottom: 1px solid #000;
	width: fit-content;
}
video{
	width: 50%;
	height: auto;
	aspect-ratio: 16/9;
	border-radius: 24px;
	display: block;
	margin: auto;
}
.news-ul , .company-ul{
	width: 100%;
	max-width: 800px;
}
.news-ul li , .company-ul li{
	padding: clamp(12px, 7.543px + 1.143vw, 24px);
	border-bottom: 1px solid #1A1A1A;
}
.news-ul li p:nth-child(1) , .company-ul li p:nth-child(1){
	width: 30%;
}
.news-ul li p:nth-child(2) , .company-ul li p:nth-child(2){
	width: auto;
	flex: 1;
}
.news-ul li:nth-last-child(1) , .company-ul li:nth-last-child(1){
	border-bottom: none;
}
#underfv{
	width: 100%;
	padding-top: clamp(62.11px, 23.270px + 5.051vw, 96px);
	height: 320px;
	background-position: center;
	background-size: cover;
}
.umibudou{
	background-image: url("../images/umi-header.png");
}
.shima{
	background-image: url("../images/shima-header.png");
}
.contact{
	background-image: url("../images/contact-header.png");
}
.breadcrumb {
	width: 90%;
	max-width: 1280px;
	margin: auto;
	justify-content: flex-start;
	padding: 0;
}
.inner-factory{
	padding: clamp(64px, 40.229px + 6.095vw, 128px) 0;
}
.under-abouth3{
	font-size: clamp(20px, 15.543px + 1.143vw, 32px);
	margin-bottom: clamp(24px, 18.057px + 1.524vw, 40px);
}
.under-product p{
	margin-bottom: clamp(24px, 18.057px + 1.524vw, 40px);
}
.under-swiper{
	padding-top: clamp(32px, 20.114px + 3.048vw, 64px);
	padding-bottom: clamp(32px, 20.114px + 3.048vw, 64px);
}
.under-swiper .swiper-wrapper{
	justify-content: flex-start;
}
.under-product{
	align-items: flex-start;
}
.under-product > div:nth-child(1) img{
	margin-bottom: clamp(24px, 18.057px + 1.524vw, 40px);
}
.swiper-slide p{
	text-align: center;
}
.contact-link{
	width: fit-content;
	padding: 12px 24px 16px;
	border-radius: 30px;
	gap: 12px;
	line-height: 1;
}
.footer-inner{
	align-items: flex-start;
	width: 90%;
	max-width: 90%;
}
.footer-inner ul{
	gap: clamp(24px, 18.057px + 1.524vw, 40px);
}
.copyright{
	font-size: 10px;
	background: #E0F7FA;
	padding: 8px;
	text-align: center;
}

.pp h2{
	font-size: clamp(20px, 15.543px + 1.143vw, 32px);
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #2F9143;
	padding-bottom: 12px;
	margin-top: clamp(32px, 20.114px + 3.048vw, 64px);
	margin-bottom: 12px;
}

.pp p{
	text-transform: lowercase;
}

.pp p:nth-last-child(1){
	text-align: right;
}

.news-innerheader{
	color: #FFFFFF;
	font-size: clamp(24px, 15.086px + 2.286vw, 48px);
}

.news-innerh1{
	text-align: left;
	color: #1A1A1A;
}
.pp.news-inner > div{
	margin-top: clamp(32px, 20.114px + 3.048vw, 64px);
}
.pp.news-inner p:nth-last-child(1){
	text-align: left;
}

.contact-form form{
	width: 90%;
	max-width: 960px;
}

.contact-form form .label{
	margin-bottom: clamp(24px, 18.057px + 1.524vw, 40px);
}

.contact-form form .label p:nth-child(1){
	width: 320px;
}

.contact-form form .label p:nth-last-child(1){
	flex: 1;
}

.contact-form form .textarea-link{
	align-items: flex-start;
}

.contact-form form .label p:nth-last-child(1) span , .contact-form form .label p:nth-last-child(1) input , .contact-form form .label p:nth-last-child(1) select , .contact-form form .label p:nth-last-child(1) textarea{
	width: 100%;
}

.contact-form form .optional , .contact-form form .required{
	border-radius: 4px;
	padding: 0 clamp(4px, 2.514px + 0.381vw, 8px)  clamp(2px, 1.257px + 0.19vw, 4px);
	font-size: clamp(12px, 10.514px + 0.381vw, 16px);
	margin-right: clamp(4px, 1.029px + 0.762vw, 12px);
	color: #FFF;
	line-height: 1;
}

.contact-form form .required{
	background: #F00;
}
.contact-form form .optional{
	background: #7F7F7F;
}
.pp-link label{
	display: flex;
	margin-left: 320px;
}
.contact-form form .pp-link p:nth-last-child(1) input{
	width: fit-content;
}
.wpcf7-submit{
	border-radius: 40px;
	background: #008DD2;
	display: flex;
	padding: clamp(12px, 7.543px + 1.143vw, 24px) clamp(40px, 25.143px + 3.81vw, 80px);
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: #FFFFFF;
	font-size: clamp(18px, 12.800px + 1.333vw, 32px);
	line-height: 1;
}

@media (max-width: 768px){
	#fv{
		padding-top: 49.33px;
	}
	.breadcrumb{
		flex-direction: row;
		flex-wrap: wrap;
	}
	#underfv{
		height: 160px;
	}
	.inner-contents > *{
		width: 100%;
	}
	video{
		width: 100%;
	}
	.news-ul, .company-ul{
		padding: 0;
	}
	.news-ul li a, .company-ul li{
		flex-direction: row;
	}
	.under-link{
		width: fit-content;
	}
	.inner-factory video{
		width: 90%;
	}
	.contact-link{
		flex-direction: row;
	}
	.footer-inner ul{
		padding: 0;
	}
	.footer-inner{
		text-align: center;
	}
	.contact-form form{
		width: 100%;
	}
	.contact-form form .label{
		gap: 12px;
	}
	.contact-form form .label p:nth-child(1){
		width: 100%;
	}
	.contact-form form .label p:nth-last-child(1){
		width: 100%;
	}
	.pp-link label{
		margin: auto;
	}
}