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

* {
	box-sizing:border-box;	
	scroll-behavior: smooth;
}

html {
	font-size: 10px;
}

body {
	font-size:1.6rem;
	color:#333;
	line-height:1.5;	
}

.bg-animation{
	z-index: -100;
	position: fixed;
	bottom: -1.5rem;
	left:-.51rem;
	animation: bg-animation 35s linear infinite;
}

@keyframes bg-animation{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

@media screen and (max-width:820px){
	.bg-animation{
		width: 60%;
	}
}

#wrapper{
	overflow: hidden;
}

section, #Q1, #Q2, #Q3, #size-kg, #size-bobbin{
	scroll-margin-top: 70px;
}

a {
	text-decoration:none;
	color:#333;
	text-align:center;
}

a:hover{
	color: #73BBC1;
	transition: 0.5s;
}


p{
	font-size: 1.6rem;
	line-height: 3rem;
}

img {
	max-width:100%;
	height:auto;
	width: auto;
}

.bold{
	font-weight: bold;
}



h2 {
	text-align:center;
}

h3{
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 3rem;
	color: #134e82;
}


.br-sp{
	display: none;
}

.spece-sp{
	display: none;
}

.colorInner{
	background: rgba(19,78,130,0.05);
}

.main {
	display:block;
	position:relative;
}

.clearfix:after {
  content:"";
  clear:both;
  display:block;
}

.inner {
	width:1200px;
	margin:0 auto;
}

.inner730px{
	width: 780px;
	margin: 0 auto;
}

.section_padding{
	padding-top: 100px;
	padding-bottom: 100px;
}

@media screen and (min-width: 980px) {
    .inner980 {
    width: 980px;
        margin: 0 auto ;
    }

}

.fontwhite {
	color:#fff;
}


/*-------video設定-----------*/
.movie{
	margin:0 auto;
	text-align: center;
}
.movie video{
	width: 100%;
	vertical-align: bottom;
}

/*==========ボタン==========*/

.button a {
	display:block;
	margin:100px 550px 150px;
	padding:35px 0;
}

.button a:hover {
	background-color:#333;
	color:#fff;
}


/*==========#kyoutuuheader==========*/
/* 初期状態（透明背景・白文字） */
.flexBoxHeader{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

#kyoutuuheader {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: transparent;
  transition: all 0.3s ease;
}

#kyoutuuheader a {
  color: white;
  transition: color 0.3s ease;
	font-size: 1.8rem;
}

/* スクロール後の状態（白背景・黒文字） */
#kyoutuuheader.scrolled {
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#kyoutuuheader.scrolled a {
  color: black;
}

#kyoutuuheader.scrolled a span {
  color: #134e82;
}

.navTel{
	font-size: 2.5rem;
	font-weight: bold;	
	letter-spacing: 1px;
}

.subpage .navTel{
	color: #134e82;
}

/* ただし、トップページのみ .mail_mark_text は白のままにする */
body.is-top #kyoutuuheader.scrolled .mail_mark_text{
  color: white !important;
}


.gnavBtn{
	display: none;
}

h2 img {
	margin-left:30px;
	padding-top: 10px;
	height: 58px;
}

#gNav {
	height:70px;
	line-height:70px;
}

#gNav ul {
	display:flex;
	justify-content:flex-end;
	align-items: baseline;
	height: 70px;
}

#gNav li:last-child {
  align-self: center;
}

#gNav li{
height: 70px;
	line-height: 70px;
}

#gNav li a{
	flex-direction:row;
	padding: 0 30px;
	display: block;
	height: 70px;
}

#gNav li a:hover{
	transition:1s;
	color:#73BBC1;
}

#gNav li:last-child a{
	background-color:#134e82;
	padding:0 30px;
	color: #fff;
}

#gNav li:last-child a:hover {
	background-color:#73BBC1;
	transition:1s;
}

#kyoutuuheader {
	display: flex;
	z-index: 999;
	position: fixed;
  top:0px;
	left:0px;
	width:100%;
}


#kyoutuuheader h1 img {
	float:left;
	margin: 50px 35px 25px;
	z-index: 999;
	position: fixed;
}

#page_top{
  width: 70px;
  height: 50px;
  position: fixed;
  right: -70px;
  bottom: 50px;
  opacity: 0.6;
  border-radius: 50%;
	z-index: 999;
}


.mail_mark a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
}

.mail_img img {
  width: 2em;
	margin-right: 0.5rem;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.mail_mark_text {
  display: inline-block;
  font-size: 1em;
  vertical-align: middle;
}



@media screen and (max-width: 1500px) {
	
	#gNav li a {
    padding: 0 10px;
	}
}

@media screen and (max-width: 1400px) {
	
	#kyoutuuheader #gNav li a {
	font-size: 1.4rem;
		padding: 0 5px;
	}
}



/*==========.mainvisual==========*/

.pc{ display: block ; }
.sp{ display: none ; }


.mainvisual {
	position:relative;
	color: white;
}

.topheader {
	position:absolute;
	z-index:10;
	top: 30%;
	left:10%;
}

.topheader a{
	display: block;
	width: 80%;
	margin: 0 auto;
}

h1{
	font-size: 5rem;
	margin-bottom: 3rem;
}

h1 div {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: bold;
  font-style: normal;
	line-height: 9rem;
	letter-spacing: 1rem;
}



.topheader p{
	font: bold;
	color: #FFF;
	font-size: 2em;
	margin-top: 1em;
}


/*==========.news==========*/
header {
  position: relative;
}

.mainvisual {
  position: relative;
  z-index: 1;
}

/* ========= PCデフォルト（重ねる） ========= */
.news {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(-50%);
  background-color: #134e82;
  color: white;
  padding: 1.5rem 15rem 1.5rem 5rem;
  width: fit-content;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 10;
  border-radius: 4px 0 0 4px;
	font-size: 1.6rem;
}

.news_title{
	margin-bottom: 1rem;
	font-weight: bold;
	font-size: 2rem;
}

.news dl {
  margin: 0;
  display: block;              /* ブロック化して縦に並べる */
}

.news-item {
  display: flex;               /* 各 item の中で横並び */
  align-items: flex-start;
  margin-bottom: 0.5em;
}

.news-item dt {
  margin: 0 1rem 0 0;
  font-weight: bold;
  white-space: nowrap;
}

.news-item dd {
  margin: 0;
}


/* ========= スマホ用（重なり解除して下に配置） ========= */

@media screen and (max-width: 1100px) {
	
	h1 div{
		line-height: 4rem;
	}
	
	h1{
		font-size: 3rem;
	}
	
	.topheader{
		left: 0;
		margin: 0 3rem;
		transform: none;
	}
	
	#kyoutuuheader a {
		color: rgba(17,17,17,1.00);
	}
	
  .mainvisual {
    position: static;
    margin-bottom: 0;
  }
	
	.sp img {
  display: block;     
  width: 100%;
  height: auto;
}

  .news {
    position: static;
    transform: none;
    width: 100%;
    white-space: normal;
    z-index: 1;
    padding: 2rem 3rem;
    margin: 0 auto 2rem auto;
	  border-radius: 0;
  }	
	
	 #main {
    margin-top: 0 !important;
  }
}

@media (max-width:860px) and (min-width:600px){
	.topheader{
		top: 10%;
	}
}

@media screen and (max-width:600px){
	/*------------- mv -------------*/	
	.pc{
		display:  none !important;
	}
	.sp{
		display:  block !important;
	}
	
	.topheader a{
		width: 85%;
	}
	
	.topheader p{
		width: 280px;
		font-size: 1.5em;
	}

}

/*==========#home_top==========*/
.big1{
	font-size: 4rem;
	font-weight: bold;
	line-height: 7rem;
	margin-bottom: 	2rem;	
	letter-spacing: 3px;
}

.big2{
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 	5rem;
	text-align: center;
}
@media screen and (max-width:710px){
	.big1, .big2{
		font-size: 2rem;
		line-height: 2.5rem;
		margin-bottom: 1rem;
	}
}

.btn{
	background: #1760a1;
	font-size: 2rem;
	text-align: center;
	padding: 2rem 0;
	width: 40rem;
	margin: 8rem auto;
}

.btn a{
	color: #fff;
}

.btn:hover, .mail:hover{
	background: #73BBC1;
	transition: 1s;
	color: white;
}

/*==========FAQ==========*/
.home_section5{
	margin: 13rem 0 3rem;
}

.home_section5 .big2{
	text-align: center;
}

.home_section5 a{
	color: #1760a1;
	font-size: 2rem;
}

.faq_index{
	background: #f1f8ff;
	padding: 2rem 4rem;
	margin-bottom: 2rem;
	display: flex;
	justify-content: space-between;
}

/*==========contentpage==========*/
.contactpage{
	text-align: center;
	margin-bottom: 5rem;
}

.contactpage_flex{
	display: flex;
	justify-content: space-between;
	margin: 3rem auto;
}

.tel, .mail{
	background: #1760a1;
	width: 450px;
	padding: 2rem;
	font-size: 2.5rem;
	color: #fff;
}

.tel, .mail a{
	color: #fff;
}



/*------------------　script img -------------------------*/
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}


/*==========.contact==========*/

.contact a {
	display:block;
	background-color:#73BBC1;
	margin:15px 150px 0;
	padding:16px 0;
}

.contact a:hover {
	background-color:#1780a7;
	transition: 1s;
}


@media (max-width:1230px) and (min-width:600px){
	.contactpage_flex{
		width: 500px;	
		display: block;
	}
	
	.tel{
		margin-bottom: 1rem;
	}
}


/*==========footer==========*/
footer{
	background: url("../img/homeFooter.jpg") no-repeat;
	background-size: cover;
	padding: 3em 0;
}

.footer_flex{
	display: flex;
	justify-content: space-around;
	margin-bottom: 5rem;
}

.footer_flex .left{
	order: 1;
}

.footer_flex .right{
	order: 2;
}

.footerNav{
	display: flex;
}

.footerNav:first-child{
	margin-top: 9rem;
}

.footerNav a{
	color: #fff;
	margin-left: 3rem;
}

.left img {
	margin-top:20px;
	height: 50px;
}

footer p {
	margin-bottom:10px;
	text-align:left;
}


.copyright {
  font-size:1.4rem;
	text-align:center;
	clear:both;
	margin:0;
	padding-top: 3em;
}





/*=============tablet~pc===============*/


@media screen and (max-width:1080px){
	
	.inner980{
		width: 100%;
	}
	
/*------------- .gnavBtn -------------*/
	
	.flexBoxHeader{
		display: block;
	}
	
	h2{
		text-align: left;
	}
	
	#gNav {
    height: 0;
    line-height: 0;
	}

/*------------- .gnavBtn li -------------*/

#gNav ul {
	display: block;
	background: #fff;
	position: fixed;
	width: 100vw;
	top: -500px;
	transition: 0.5s;
	z-index: 99;
}

#gNav li {
	margin-right: 10px;	
	height: 70px;
	width: 100%;
	border-bottom: 1px solid #D1E8EA ;
	background: #fff;
}
	
	/*------------- .contactpage -------------*/
	.contactpage_flex{
		display: block;
	}
	
	.tel, .mail{
		width: 100%;
		margin-bottom: 1rem;
		font-size: 2rem;
	}
	
	.contactpage{
		margin-bottom: 0;
	}

	
	/*------------- .footer------------*/
	
	footer{
		background:rgba(15, 64, 107, 1);
		padding: 0 3rem;
		width: 100%;
	}
	
	.footer_flex{
		display: block;
	}
	.footer_flex .right{
		padding: 1em 0;
	}
	.footerNav:first-child {
    margin-top: 0;
		padding-top: 1rem;
}
	footer p {
	margin-bottom:0;
	}
	.footerNav a {
    margin-left: 0;
	margin-right: 2rem;
}

}
/*------------ mv -----------*/

@media screen and (max-width:820px){
	.topheader p{
		font-size: 1.2em;
	}
	
	.copyright{
		margin: 0;
	}
	
}

@media screen and (max-width:730px){
	.inner730px{
		width: 100%;
	}
}

@media screen and (min-width:600px){
	.flexBox div{
		width: 600px;
		margin: 0 auto;
	}
	
	.textInner{
		margin: 0 auto;
	}
}


/*================== mobile ====================*/

@media only screen and (max-width: 430px) {
img { max-width: 100%; }
}
	
@media screen and (max-width: 430px){
	
	
	.contact {
		padding: 0 20px;
	}
	
	.inner, .inner730px{
		width: 100%;
	}	
	
	h2 img{
    margin-left: 13px;
    padding-top: 16px;
    height: 60px;
	}
	
	.br-sp{
		display: block;
	}
	
	.spece-sp{
		display: inline;
	}
	

/*------------- products -------------*/		
	#products .sp{
	display: block;
		padding:  20px;
		margin: 0 auto;
	}

		img{
		max-width: 100%;
	}
	
	.footerNav{
		display: block;
	}
	
	.footerNav p{
		line-height: 1rem;
	}

}


/*fadeInアニメーション----------------------------*/
.fadein {
  opacity : 0;
  transform: translateY(10px);
  transition: all 1s;
}