@charset "utf-8";

/* 基準値の指定 */
:root {
  font-size: 15px;
}

body {
  //font-family: sans-serif;
  background-color: #f9fff4;
}

a {
  color: #256a01;
  text-decoration: none;
}

a img {
  border: none;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

p {
  text-align: justify;
}


/* Skip Link */
.skip {
  font-size: 0.85rem;
  background-color: #fff;
  padding: 0.5rem 2rem;
}


/* Header */
.kkc-Header {
  display: block;
  background-color: #fff;
  padding: 1.5rem 2rem;
}

.kkc-Header a {
  //color: #000;
}

.kkc-Header a:hover {
  color: #060;
  //color: #45c80d;
}

.kkc-Header_Logo {
  line-height: 1;
  margin-bottom: 1rem;
}

/* ナビゲーションメニュー */
.kkc-Header_NavItems {
  display: flex;
  flex-wrap: nowrap;
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

.kkc-Header_NavItem {
  margin: 0 1rem 0 0;
  text-transform: uppercase;
}

.kkc-Header_NavItem:last-child {
  margin-right: 0;
}

@media all and (min-width: 600px) {
	  /* 600px以上でFlexboxを有効にしてレイアウトを切り替える */
	  .kkc-Header {
	    display: flex;
	    flex-wrap: wrap;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	  }

	  .kkc-Header_Logo {
	    margin: 0;
	  }

	  /* 600px以上のナビゲーションメニュー */
	  .kkc-Header_NavItem {
	    margin: 0 2rem 0 0;
	    text-transform: uppercase;
	  }
}


/* Footer */
.kkc-Footer {
  display: block;
  background-color: #e5ffe5;
  //color: #444;
  padding: 3rem 2rem 3rem;
  margin-top: 2rem;
}

.kkc-Footer a {
  //color: #000;
}

.kkc-Footer a:hover {
  //color: #45c80d;
}

.kkc-Footer_NavItems {
  list-style-type: none;
  list-style-position: inside;
  margin: 0 0 2rem;
  padding: 0;
  text-align: right;
}

.kkc-Footer_NavItem {
  margin: 0;
  line-height: 1.5;
  font-size: 0.9rem;
}

.kkc-Footer_Company {
  line-height: 1;
  margin: 0 0 1rem;
}

.kkc-Footer_Company dt {
  line-height: 1;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.kkc-Footer_Company dd {
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.kkc-Footer_Social {
  display: flex;
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}

.kkc-Footer_SocialItem {
  margin: 0 0.5rem 0 0;
}

@media all and (min-width: 600px) {
	  /* 600px以上でFlexboxを有効にしてレイアウトを切り替える */
	  .kkc-Footer {
	    display: flex;
	    flex-direction: row-reverse;
	    justify-content: space-between;
	    align-items: flex-start;
	  }

	  .kkc-Footer_NavItems {
	    text-align: right;
	  }
}


/* Main Content Base */
/* 横幅一杯のブロックのスタイル */
.kkc-Content_Box-FullWidth {
  display: block;
  margin-bottom: 2rem;
}

/* 余白ありのブロックのスタイル */
.kkc-Content_Box-Padding {
  display: block;
  padding: 2rem;
}

/* シングルカラムの横幅指定 */
.kkc-Content_Box-Single {
  width: 100%;
}

.kkc-Content_Box-Single_80 {
  width: 80%;
}

.kkc-Content_Box-Single p {
  text-align: justify;
}

.kkc-Content_Heading {
  //color: #555;
  //font-family: serif;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  margin: 3rem 0;
}

.kkc-Content_Paragraph-Large {
  //font-family: serif;
  font-size: 1.1rem;
  //font-weight: 300;
  display: flex;
  justify-content: center;
  line-height: 1.4;
  //color: #555;
}

@media all and (min-width: 600px) {
	  .kkc-Content_Box-Padding {
	    display: flex;
	    justify-content: center;
	  }

	  /* 600px以上ではシングルカラムの横幅を上書きして適用 */
	  .kkc-Content_Box-Single {
	    width: 80%;
	  }

	  .kkc-Content_Box-FlexWrap {
	    display: flex;
	    flex-wrap: wrap;
	  }

	  .kkc-Content_Heading {
	    font-size: 1.8rem;
	  }

	  .kkc-Content_Paragraph-Large {
	    font-size: 1.2rem;
	    line-height: 1.6;
	  }
}


/* Main Content Description List */
.kkc-Description_Items-Row {
  display: block;
  width: 100%;
}

/* お知らせやNEWSページのレイアウト指定 */
.kkc-Description_Title {
  margin-bottom: 0.2rem;
  padding: 0;
}

.kkc-Description_Data {
  margin: 0 0 2rem 2rem;
  //margin-bottom: 1rem;
  //padding: 0;
}

.kkc-Description_Data-List {
  list-style-type: none;
  list-style-position: inside;
  //margin: 0;
  padding: 0;
}

@media all and (min-width: 600px) {
	/* 600px以上のお知らせやNEWSページのレイアウト指定ではFlexboxを有効にして横並びに配置 */
	.kkc-Description_Items-Row {
	  display: flex;
	  flex-wrap: wrap;
	  flex: 1 0 auto;
	  align-items: stretch;
	  width: 100%;
	}

	.kkc-Description_Title {
	  /* flex-basisを使ってカラム幅を指定 */
	  flex-basis: 30%;
	  margin-bottom: 0.2rem;
	  padding: 0;
	}

	.kkc-Description_Data {
	  /* flex-basisを使ってカラム幅を指定 */
	  flex-basis: 70%;
	  margin-bottom: 1rem;
	  padding: 0;
	}

	/* Main Content Description List */
	.kkc-Description_Items-Row {
	  display: block;
	  width: 100%;
	}

	/* 3列テーブル形式のレイアウト指定 */
	.kkc-Description_Title {
	  margin-bottom: 0.2rem;
	  padding: 0;
	}

	.kkc-Description_Data {
	  margin: 0 0 2rem 2rem;
	  //margin-bottom: 1rem;
	  padding: 0;
	}

	.kkc-Description_Data-List {
	  list-style-type: none;
	  list-style-position: inside;
	  //margin: 0;
	  padding: 0;
	  //padding-left:50px
	}
}



.kkc-Description_Data1 {
    margin: 0 0 2rem 2rem;
}

@media all and (min-width: 700px) {
	  /* 指定px以上のレイアウト指定ではFlexboxを有効にして横並びに配置 */
	  .kkc-Description_Items-Row_4Col {
	    display: flex;
	    flex-wrap: wrap;
	    flex: 3 0 auto;
	    align-items: stretch;
	    width: 100%;
	    border-bottom: 1px dashed #CCC;
	  }

	  .kkc-Description_Title {
	    flex-basis: 30%;
	    margin-bottom: 0.2rem;
	    padding: 0;
	    font-size: 16px;
	  }

	  .kkc-Description_Data1 {
	    flex-basis: 50%;
	    margin-bottom: 0rem;
	    padding: 0;
	    content: "A" ;
	    //white-space: pre;
	    padding-left: 50px;
	  }
	  
	  .kkc-Description_Data2 {
	    flex-basis: 20%;
	    margin-bottom: 1rem;
	    padding: 0;
	  }
}


.kkc-Description_Data1_3Col {
    margin: 0 0 2rem 2rem;
}
.kkc-Description_Data2_3Col {
    margin: 0 0 2rem 2rem;
}
@media all and (min-width: 700px) {
	  /* 指定px以上のレイアウト指定ではFlexboxを有効にして横並びに配置 */
	  .kkc-Description_Items-Row_3Col {
	    display: flex;
	    flex-wrap: wrap;
	    flex: 3 0 auto;
	    align-items: stretch;
	    width: 100%;
	  }

	  .kkc-Description_Title_3Col {
	    flex-basis: 30%;
	    margin-bottom: 0.2rem;
	    padding: 0;
	    font-size: 16px
	  }

	  .kkc-Description_Data1_3Col {
	    flex-basis: 35%;
	    margin-bottom: 1rem;
	    padding: 0;
	  }
	  
	//  .kkc-Description_Data2_3Col {
	//    flex-basis: 35%;
	//    margin-bottom: 1rem;
	//    padding: 0;
	//  }
}


/* Main Content Button */
.kkc-Content_Button {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.1;
  background-color: #8ece84;
  border: 1px solid #8ece84;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
  border-radius: 0.2rem;
}

.kkc-Content_Button:hover {
  display: block;
  color: #fff;
  background-color: #5e915e;
  border: 1px solid #5e915e;
}

@media all and (min-width: 600px) {
  .kkc-Content_Button {
    width: 75%;
  }
}


/* Main Home Hero */
/* トップのヒーローイメージのブロックのテキストの配置はFlexboxで調整する */
.kkc-Content_Hero {
  display: flex;left
  align-items: center;
  width: 100%;
  height: 400px;
  background-color: #fff;
  background-image: url('../images/kkc-Content-HomeHero.jpg');
  background-position: 20% top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2rem;
}

.kkc-Hero_Text {
  color: #fff;
  background-color: rgba(255,255,255,0.1);
}

.kkc-Hero_Heading {
  //font-family:sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  color: #00502e;
}

.kkc-Hero_Tagline {
  //font-family:sans-serif;
  font-size: 0.75rem;
  margin-bottom: 0;
  color: #1f3134;
}

@media all and (min-width: 600px) {
	  /* 600px以上のヒーローイメージのブロックの高さや写真の配置位置を上書き */
	  .kkc-Content_Hero {
	    width: 100%;
	    height: 520px;
	    background-position: center 40%;
	  }

	  .kkc-Hero_Text {
	    padding-left: 2rem;
	    color: #fff;
	  }

	  .kkc-Hero_Heading {
	    font-size: 2.2rem;
	    font-weight: 400;
	    line-height: 1.2;
	  }

	  .kkc-Hero_Tagline {
	    font-size: 0.9rem;
	  }
}


/* Home Main Column */
.kkc-Content_HomeColumn {
  display: block;
  margin-bottom: 5rem;
}

.kkc-Content_HomeColumn_ {
  white-space: nowrap;
}

.kkc-Column_Text {
  width: 100%;
}

.kkc-Column_Heading-Small {
  color: #000;
  font-size: 0.85rem;
  line-height: 1.2;
  border-bottom: 1px solid #000;
  margin-bottom: 3rem;
  padding-bottom: 0.3rem;
}

.kkc-Column_Heading-Normal {
  //color: #444;
  //font-family: serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 3rem;
}

.kkc-Column_Heading-Large {
  color: #000;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  border-bottom: 1px solid #000;
  margin-bottom: 3rem;
  padding-bottom: 0.3rem;
}

.kkc-Column_Paragraph {
  margin: 0 0 2rem 0;
}

.kkc-Column_Image {
  width: 100%;
  margin: 0 0 2rem 0;
}

.kkc-Content_Image-Fluid {
  width: 100%;
  max-width: 100%;
}

.kkc-Column_ImageCaption {
  //color: #555;
  font-size: 0.8rem;
  margin: 0.5rem 0;
}

@media all and (min-width: 600px) {
	  /* トップページのコラム部分のレイアウト指定もFlexboxで上書き */
	  .kkc-Content_HomeColumn {
	    display: flex;
	    flex-wrap: nowrap;
	    flex: 0 0 auto;
	    align-items: center;
	    margin-bottom: 1rem;
	    width: 85%;
	  }

	  /* コラム部分の写真とテキストのブロックの入れ替えはflex-directionで視覚的な位置を逆に */
	  .kkc-Content_Column-Reverse {
	    flex-direction: row-reverse;
	  }

	  .kkc-Column_Text {
	    flex-basis: 60%;
	    padding: 3%;
	  }

	  .kkc-Column_Image {
	    flex-basis: 40%;
	    padding: 3%;
	  }

	  .kkc-Column_Heading-Small {
	    font-size: 0.9rem;
	  }

	  .kkc-Column_Heading-Normal {
	    font-size: 1.5rem;
	  }
}


/* Main Content Contact */
.kkc-Content_HomeContact {
  margin: 3rem 0 5rem;
}


/* News Column */
.kkc-Content_NewsColumn {
  display: block;
  margin-bottom: 3rem;
}

.kkc-News_Text {
  width: 100%;
}

.kkc-News_Heading-Small {
  color: #000;
  font-size: 0.85rem;
  line-height: 1.2;
  border-bottom: 1px solid #000;
  margin-bottom: 1.5rem;
  padding-bottom: 0.3rem;
}

.kkc-News_Heading-Normal {
  //color: #444;
  //font-family: serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.kkc-technology_Heading-Normal {
  //color: #444;
  //font-family: serif;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  vertical-align: top;
  font-size: 1.4rem;
  font-weight: 400;
}

.kkc-News_Paragraph {
  margin-bottom: 0;
  margin-left: 20px;
}

.kkc-products_font {
   font-size:10px;
}

.kkc-technology_Paragraph {
  margin-bottom: 0;
  white-space: pre-wrap;
  width: 350px;
  height: 50px;
  word-wrap: break-word;
  vertical-align: middle;
  text-align:justify;
  text-justify: auto;
}

.kkc-technology_inline {
  display: inline-block;
  vertical-align: top;
  margin: 10px
}

.kkc-technology_Image {
  width: 170px;
  height: 125px;
  border: 0px;
  margin: 5px
}

.kkc-News_Image {
  width: 100%;
  max-width: 800px;	
  margin: 0 0 1rem 0;
}

.hr {
  border-top: 1px solid #aaa;
}

/* 各ページのトップ画像用 */
.kkc-News_Image-Fluid {
  width: 100%;
  max-width: 100%;
  max-height:300px;
}

@media all and (min-width: 600px) {
	  .kkc-Content_NewsColumn {
	    display: flex;
	    flex-wrap: nowrap;
	    flex: 0 0 auto;
	    align-items: flex-start;
	    width: 85%;
	  }

	  .kkc-Content_NewsColumn-Reverse {
	    flex-direction: row-reverse;
	  }

	  .kkc-News_Text {
	    flex-basis: 75%;
	    padding: 3%;
	  }

	  .kkc-News_Image {
	    flex-basis: 25%;
	    padding: 3%;
	  }

	  .kkc-News_Heading-Small {
	    font-size: 0.9rem;
	  }

	  .kkc-News_Heading-Normal {
	    font-size: 1.4rem;
	    font-weight:400;
	    display: inline-block;
	  }
}


/* Contact Form */

.kkc-Content_ContactForm {
  margin: 2rem 0;
}

.kkc-ContactForm_Items {
  margin-bottom: 3rem;
}

.kkc-ContactForm_InputText {
  width: 100%;
  height: 3rem;
  line-height: 3;
  padding: 0 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid #999;
}

.kkc-ContactForm_InputSelect {
  width: 75%;
  height: 3rem;
  padding: 0 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid #999;
}

.kkc-ContactForm_InputArea {
  width: 100%;
  line-height: 1.6;
  height: 10rem;
  padding: 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid #999;
}

@media all and (min-width: 600px) {
  /* 親要素（.kkc-Content_Box-Padding）のFlexboxの指定を活かして、ラベルとフォーム要素を上下中央に揃える */
  .kkc-ContactForm_Items {
    align-items: center;
  }
}




/*========= ナビゲーションドロップダウンのためのCSS ===============*/
/*==ナビゲーション全体の設定*/
nav{
	background:#efffef;
	padding:	1rem 1rem 0rem 1rem; /* 各項目の高さを指定 */
	//padding-top:    1rem;
	//padding-bottom: 0.1px;
	//color:#fff;
	text-align: center;
}
/*ナビゲーションを横並びに*/
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	padding:	0rem 1rem 0rem 1rem; /* 各項目の高さを指定 */
	//padding:3px 3px 0px 0px; /* 各項目の高さを指定 */
	position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
	display: block;
	text-decoration: none;
	//color: #999;
	//padding:1rem 1rem;  /* 各メニュー項目の幅設定 */
	transition:all .3s;
}

nav ul li li a{
	//padding:1rem 1rem;  /* 各メニュー項目の幅設定 */
	//padding:10px 35px; /* 2階層目の高さを指定 */
}

nav ul li a:hover{
	color:#fff;	
}

/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	left:2.8rem;
	top:22px;
	width:6px;
	height:6px;
	border-top: 2px solid #58a54f;
	border-right:2px solid #bababa;
	transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
	content:'';
	position: absolute;
	left:6px;
	top:17px;
	width:6px;
	height:6px;
	border-top: 2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
nav li.has-child ul{
	position: absolute;		/*絶対配置で位置を指定*/
	left:0;
	top:2rem;
	z-index: 4;
	padding: 0.5rem; 		/* 各項目の高さを指定 */
	//background:#72d876;
	background: rgb(72 220 76 / 60%);
	width:	10rem;			/* remはフォント1個分 *
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
	visibility: visible;
	opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
	//color: #666666;
	//border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child > a{
	border-bottom:none;
}

nav li a:hover,
nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background:#fff;
}

/*==3階層目*/
/*3階層目の位置*/
nav li.has-child ul ul{
	top:0;
	left:182px;
	background:#66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
	background:#448ED3;
}


/*==768px以下の形状*/
@media screen and (max-width:768px){
	nav{
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
	nav li.has-child ul,
	nav li.has-child ul ul{
		position: relative;
		left:1.5rem;
		top:1rem;
		width:100%;
		//background:#ada;
		background: rgb(160 230 160 / 50%);
		visibility:visible;	/*JSで制御するため一旦表示*/
		opacity:1;			/*JSで制御するため一旦表示*/
		/*display: none;	JSのslidetoggleで表示させるため非表示に*/
		transition:none;	/*JSで制御するためCSSのアニメーションを切る*/
	}
	
	nav ul li{
		padding: 0.5rem 0.5rem 0.5rem 0rem; /* 各項目の高さを指定 */
	}
	
	nav ul li a{
		display: block;
		padding:0.5rem 0.5rem;  /* 各メニュー項目の幅設定 */
		//border-bottom:1px solid #ccc;
	}
	
	/*矢印の位置と向き*/
	nav ul li.has-child::before{
		left:1rem;	
		top:1.5rem;
	}
	
}






/*========= フェードイン、スライドイン ===============*/
/* その場でフェードイン */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下からスライドイン */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 上からスライドイン */
.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左からスライドイン */
.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右からスライドイン */
.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}




/* ハンバーガーメニューに関するCSS */
	/* チェックボックスを非表示にする */
	.drawer_hidden {
	  display: none;
	}

@media all and (max-width: 767px) {
	/* ハンバーガーアイコンの設置スペース */
	.drawer_open {
	  display: flex;
	  height: 60px;
	  width: 60px;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  z-index: 100;/* 重なり順を一番上にする */
	  cursor: pointer;
	}

	/* ハンバーガーメニューのアイコン */
	.drawer_open span,
	.drawer_open span:before,
	.drawer_open span:after {
	  content: '　　';
	  display: block;
	  height: 4px;
	  width: 25px;
	  border-radius: 3px;
	  background: #333;
	  transition: 0.5s;
	  
	  position: fixed;
	  top: 16px;
	  right: 20px;
	  
	}

	/* 三本線の一番上の棒の位置調整 */
	.drawer_open span:before {
	  top: 8px;
	}

	/* 三本線の一番下の棒の位置調整 */
	.drawer_open span:after {
	  top: 24px;
	}

	/* アイコンがクリックされたら真ん中の線を透明にする */
	#drawer_input:checked ~ .drawer_open span {
	  background: rgb(255 255 255 / 0%);
	}

	/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
	#drawer_input:checked ~ .drawer_open span::before {
	  top: 4%;
	  transform: rotate(45deg);
	}

	#drawer_input:checked ~ .drawer_open span::after {
	  top: 4%;
	  transform: rotate(-45deg);
	}
	  
	/* メニューのデザイン*/
	.nav_content {
	  width: 100%;
	  position: fixed;
	  top: 0;
	  left: 100%; /* メニューを画面の外に飛ばす */
	  z-index: 99;
	  background-color: rgb(200 220 200 / 85%);
	  //background: #ded;
	  transition: .3s;
	}

	/* アイコンがクリックされたらメニューを表示 */
	#drawer_input:checked ~ .nav_content {
	  left: 0;/* メニューを画面に入れる */
	}
}



/*========= 埋め込みフォームのサイズを可変にする ===============*/
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* 必須入力項目 */
.necessary {
  color: f00;
}



/*========= ユーザーが画面スクロールしたらフェードインする（要js） ===============*/
.scrollSlideUp {
  aspect-ratio: 16 / 9;
  background-color: #dedede;
  opacity: 0;
  transition: all 1s;
  transform: translateY(150px);
}
.no-js .scrollSlideUp {
  aspect-ratio: 16 / 9;
  background-color: #dedede;
  opacity:1;
  visibility: visible;
  transform: translateY(0);
}
.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* 埋め込みフォームの中央表示 */
.form_middle_contact {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  min-height: 40rem;		/* これが少ないと埋め込み画面が小さくスクロールバー付き表示となる */
  max-height: 100rem;
  //min-height: 400px;
  //max-height: 700px;
  width: 100%;
  max-width: 500px;
}