@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;
}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body{
    -webkit-text-size-adjust: none;
       font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    line-height: 1.8em;
    background-position: center top;
    background-attachment: fixed;
    background-color: #FFF;
}	

/* ---------------------------------------------------------------------
PC-SP表示切替
--------------------------------------------------------------------- */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}



/* リンク設定
------------------------------------------------------------*/
a{
	margin: 0;
	padding: 0;
	text-decoration: none;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
	color: #fff;
}

a:hover, a:active{
outline: none;
color:#6f6f6f;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after, ul.post li:after,nav#mainNav .inner:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post, ul.post li,nav#mainNav .inner{zoom: 1;}



.contact a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 450px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background-image: linear-gradient(#00c0fa, #015eea);
    border-radius: 10px;
    border-bottom: solid 5px #003c96;
	height: 100px;
	font-size: 180%;
}
.contact a:hover {
    border-bottom: solid 2px #003c96;
    transform: translateY(3px);
}


@media only screen and (max-width: 644px){
.contact a {
  height:70px;
	font-size: 150%;
}	
	}	
	
	
	
/* レイアウト
------------------------------------------------------------*/
.wrapper, .inner{
	margin: 0 auto;
	width: 960px;
}

.wrapper2, .inner{
	margin: 0 auto;
	width: 960px;

}
#header{
overflow:hidden;
}

.content{
	width: 960px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
	background-color: #FFF;
}


.content2{
	width: 900px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}

.toppage{
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

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



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

.alignright{float:right;}
.alignleft{float:left;}


.text-text0 {
	line-height: 30px;
	padding-bottom: 30px;
	line-height: 1.8em;
}


.text-text {
	padding-right: 50px;
	padding-left: 50px;
	line-height: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
	line-height: 1.8em;
}




/* トップページ　メイン画像
----------------------------------*/
#mainimg{
	clear: both;
	text-align: center;
	z-index: 0;
	background-repeat: repeat;
	background-position: center;
		height: 800px;
	background-image: url("img/head-bg.jpg")
	}

#mainimg2{
	clear: both;
	text-align: center;
	z-index: 0;
	background-repeat: repeat;
	background-position: center;
	}


#mainimg-sp{
	clear: both;
	text-align: center;
	z-index: 0;
	background-repeat: repeat;
	background-position: center;
	background-image: url("img/head-bg.jpg")
	}

/* フッター
*****************************************************/

#copyright{
	clear: both;
	text-align: center;
	color: #fff;
	font-size: 10px;
	padding-top: 10px;
	padding-right: 0;
	padding-left: 0;
}


#footer{
	clear: both;
	color: #FFF !important;
	padding-top: 30px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	line-height: 25px;
	background-color: #0f2655;
	font-size: 14px;	
} 



/* 959px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 959px){
  .wrapper, .inner{width:100%;}
.wrapper2, .inner{width:100%;}
	#header{width:96%;padding:0 2%;}
	
	.contact{padding:10px 0 10px;}
	
	#mainImg img{width:100%;height:auto;}

	.content, .content2 {
	clear:both;
	width:100%;
	float:none;
	margin:0 auto;
	padding:0px 0;
	}

	
}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 644px){
	body{background-position:0 -25px;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 95%;
	}

	.contact{padding:0 0 20px;}
	.contact p{text-align:center;}
	img.alignright, img.alignleft{display: block;	margin:5px auto;}
	.alignright,.alignleft{float:none;}
	
	.toppage{
	padding-top: 0px;
	padding-right: 0%;
	padding-bottom: 0px;
	padding-left: 0%;
	margin-top: 0px;
}
.toppage img{max-width:100%;height:auto;}
.text-text {
	font-size: 16px !important;
	padding-right: 5% !important;
	padding-left: 5% !important;
	line-height: 26px;
	padding-top: 20px!important;
	padding-bottom: 17px!important;
	margin-top: -12px;

}


	
#footer{

	padding-top: 10px !important;
	padding-bottom: 15px !important;
} 

}







/* ---------------------------------------------------------------------
枠
--------------------------------------------------------------------- */

.shinnen{
	background-color: #ddeffc;
    padding: 50px;
	margin: 50px;
    overflow: hidden;
	display: block;
	text-align: center;
}

.shinnen-bg{
	padding-top: 100px;
	padding-bottom: 50px;
	background-image: url("img/shinen-bg.jpg")
		
}


@media only screen and (max-width: 644px){
.shinnen{
	padding: 5%;
	margin:  5%;
}

.shinnen-bg{
	padding-top: 100px;
	padding-bottom: 50px;
   background: url("img/shinen-bg.jpg") no-repeat center/cover;
}
}
		
	
	
	
.dounyu{
margin-left: 5%;
	margin-right: 5%;
    overflow: hidden;
	display: block;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
}

.dounyu-bg{

	padding-top: 100px;
	padding-bottom: 50px;
	background-color: #0f2655;
		
}

.syohin{
margin-left: 5%;
	margin-right: 5%;
    overflow: hidden;
	display: block;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
}

.syohin-bg{;
	background-image: url("img/syohin-bg.jpg")
		
}


.riyu{
margin-left: 5%;
	margin-right: 5%;
    overflow: hidden;
	display: block;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
}

.riyu-bg{
	background-image: url("img/riyu-bg.jpg");
	padding-top: 100px;
}



	






.otoiawase-bg{

	padding-top: 100px;
	padding-bottom: 50px;
background:#0f2655;
}

.otoiawase{
margin-left: 5%;
	margin-right: 5%;
  background-color: #ffffff;
	 border-radius: 30px;       /* 内側の角丸 */
	padding-top: 50px;
}


/* ---------------------------------------------------------------------
比較
--------------------------------------------------------------------- */
	
.hikaku-bg{

	padding-top: 100px;
	padding-bottom: 50px;
  /* ▼ グラデーション背景（上:白 → 下:#f4f4f4） */
  background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%);

}
@media screen and (max-width: 768px) {
.hikaku-table {
        overflow-x: scroll;
    }
}


/* セクション全体（任意） */
.compare-wrap {
  overflow-x: auto;
}

/* 横スクロール用ラッパー */
.compare-scroll {
  overflow-x: auto;        /* 横方向にスクロール */
  -webkit-overflow-scrolling: touch;  /* スマホでスムーズに */
}

/* 画像設定 */
.compare-img {
  display: block;
  width: 960px;            /* 画像本来の幅（px で指定） */
  height: auto;
	max-width:none!important;
}

/* PCでは中央寄せ＆ハミ出さないようにしたい場合（任意） */
@media screen and (min-width: 769px) {
  .compare-scroll {
    overflow-x: visible;   /* PCではスクロールバーを基本出さない */
  }
}




/* ---------------------------------------------------------------------
ビジョン
--------------------------------------------------------------------- */
/* セクション全体（青い背景用） */
.features {
  padding: 40px 20px;
 }

/* 中身の横幅制御 */
.features-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* PC：3カラム */
  gap: 24px;
}

/* 各カード */
.feature-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 24px 20px;
  box-sizing: border-box;
}

/* アイコン部分 */
.feature-icon {
  margin-bottom: 16px;
	 text-align: center;   /* アイコンを中央寄せ */
}

.feature-icon img {
  width: 60px;     /* アイコンサイズ調整可 */
  height: auto;
}

/* タイトル */
.feature-title {
  font-size: 130%;
  font-weight: 700;
  color: #0070c9;
  margin: 0 0 12px;
}

/* 本文 */
.feature-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin: 0;
	  font-weight: 700;
}

/* ▼ スマホ（768px以下）のときは縦並び1カラム */
@media screen and (max-width: 768px) {
  .features {
    padding: 24px 12px;
  }

  .features-inner {
    grid-template-columns: 1fr;  /* 1カラム */
    gap: 16px;
  }

  .feature-item {
    padding: 20px 16px;
  }
}



/* ---------------------------------------------------------------------
お客様の声
--------------------------------------------------------------------- */
/* 声枠全体 */
.voice-waku {
  display: flex;

  gap: 20px;
  padding: 20px 24px;
  border: 1px solid #d4d4d4;
  border-radius: 16px;
  background-color: #ffffff;
  max-width: 620px;  /* 必要に応じて変更 */
	margin-bottom: 20px;
}

/* 左側アイコン */
.voice-icon {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #0b74b8; /* 青い丸背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.voice-icon img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* 右側テキスト */
.voice-text {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
text-align: left;
}

.voice-title {
  font-weight: 700;
  font-size: 150%;
  margin: 0 0 8px;
}

.voice-body {
  margin: 0;
}

@media only screen and (max-width: 644px){
.voice-waku {
	margin: 3%;
	padding-right: 15px;
	padding-left: 15px;
}
	/* 左側アイコン */
.voice-icon {
  width: 90px;
  height: 90px;

}
	
}

/* ---------------------------------------------------------------------
STEP
--------------------------------------------------------------------- */
	
/* 全体ラッパー */
.steps {
  max-width: 670px;     /* 必要に応じて調整 */
}

.step-item {
  background-color: #061a43;
  color: #ffffff;
  border-radius: 26px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 20px;
  border: 2px solid #ffffff;
  font-weight: bold;
  text-align: left;
  max-width: 620px;
}

/* 左側のSTEP画像の枠 */
.step-img {
  flex: 0 0 auto;       /* ← ここを追加（縮ませない） */
}

/* 左側のSTEP画像 */
.step-img img {
  width: 90px;           /* 画像サイズは調整可能 */
  height: auto;
  display: block;
	 flex-shrink: 0;       /* ← 念のためここでも縮み禁止 */
}

/* 右側テキスト */
.step-text {
  font-size: 15px;
  line-height: 1.7;
}

/* スマホ最適化 */
@media screen and (max-width: 600px) {
.steps {
	padding: 3%;
}

  .step-item {
    padding: 16px 14px;
    border-radius: 20px;
    gap: 14px;
  }

  .step-img img {
    width: 90px;
    flex-shrink: 0;     /* SPでも同様に */
  }

  .step-text {
    line-height: 1.6;
  }
}

/* ---------------------------------------------------------------------
FAQ
--------------------------------------------------------------------- */



.qa-bg{

	padding-top: 100px;
	padding-bottom: 50px;
background:#FFFFFF;
}



/* セクション全体はお好みで */
.faq-section {
  max-width: 880px;
  margin: 60px auto;
  padding: 0 20px;
}

.faq-heading {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 32px;
}

.faq-list {
  margin: 0;
  padding: 0;
}

/* 各Q&Aセット */
.faq-item {
  margin-bottom: 24px;
}

/* ── Q行（グレー帯＋紺のQ） ── */
.faq-question {
  width: 100%;
  border: none;
  outline: none;
  padding: 10px 16px;
  background: #f4f4f4;
  display: grid;
  grid-template-columns: 32px 1fr; /* 左のQ 32px、右が本文 */
  column-gap: 12px;
  align-items: center;
  cursor: pointer;
  text-align: left;
}  

/* ラベル共通（Q / A 両方） */
.faq-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  margin-right: 0;  /* ← gridで隙間を作るので margin-right は不要 */
}

.faq-label-q {
  background: #003366;          /* 紺色（Q） */
	color: #FFFFFF;
	font-weight: 700;
}

.faq-q-text {
  font-size: 130%!important;
  font-weight: 700;
  color: #333333;
	    grid-template-columns: 32px 1fr;
}

.faq-q-inner {
  display: grid;
  grid-template-columns: 32px 1fr;  /* 左：A 32px 固定 / 右：テキスト */
  column-gap: 12px;
  align-items: flex-start;
}



/* ── A行（白地＋赤のA） ── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  background: #ffffff;
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 500px;  /* ← 大きめにしておけば OK（実際の高さまで自動でアニメ） */
  padding-top: 10px;
  padding-bottom: 18px;
}

/* Aの中身も Q と同じく 2カラム固定にする */
.faq-answer-inner {
  display: grid;
  grid-template-columns: 32px 1fr;  /* 左：A 32px 固定 / 右：テキスト */
  column-gap: 12px;
  align-items: flex-start;
}


.faq-label-a {
  background: #e60033;
  margin-right: 0;   /* ← ここも 0 にする */
  margin-top: 2px;   /* デザイン上必要なら残してOK */
}

.faq-a-text {
  line-height: 1.8;
  color: #333333;
  text-align: left;
}

/* 開いたとき：padding だけクラスで制御 */
.faq-item.is-open .faq-answer {
  padding-top: 10px;
  padding-bottom: 18px;
}


/* スマホ調整 */
@media screen and (max-width: 768px) {

  .faq-section {
    margin: 40px auto;
    padding: 0 12px;

  }

  .faq-heading {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .faq-question {
    padding: 10px 12px; /* ← Q行の左右 */
  }

  .faq-answer {
    padding: 0 12px;    /* ← A行の左右も Q に合わせる */
  }

  .faq-q-text,
  .faq-a-text {
    text-align: left;
  }
}



/* ---------------------------------------------------------------------
フォント
--------------------------------------------------------------------- */

.white16{color:#000000;font-size:12px;}
.white10-b{
	color: #fff;
	font-size: 14px;

	line-height: 20px;
}

.black{color:#000000;}
.black10{font-size:10px;}
.black-b{color:#000000;font-weight: bold;}
.black-u{text-decoration: underline;}
.black-b-u{color:#000000;font-weight: bold;text-decoration: underline;}
.black10-b{	font-size: 12px;font-weight: bold;line-height: 20px;}
.black-b-y{color:#000000;font-weight: bold;background:#FFFF99;}
.black-y{color:#000000;background:#FFFF99;}
.black-y-u{color:#000000;background:#FFFF99;text-decoration: underline;}
.black-b-y-u{color:#000000;font-weight: bold;background:#FFFF99;text-decoration: underline;}
.bred{color:#CA0000;}
.bred-b{color:#CA0000;font-weight: bold;}
.bred-b-u{color:#CA0000;font-weight: bold;text-decoration: underline;}
.bred-b-y{color: #CA0000;font-weight: bold;background: #FFFF99;}
.bred-b-y-u{color:#CA0000;font-weight: bold;background:#FFFF99;text-decoration: underline;}

.black-b-16{font-size:16px;color:#000000;font-weight: bold;}

.blue{color:#0000FF;}
.blue-b{color:#0000FF;font-weight: bold;}
.blue-b-y{color:#0000FF;font-weight: bold;background:#FFFF99;}


.gray{color:#999999;}
.gray10{color:#999999;font-size:14px;}

.gray-b{color:#999999;font-weight: bold;}
.gray10-b{color:#999999;font-size:10px;font-weight: bold;}

.ore{
	color: #FF6600;
	font-size: 24px;
}
.ore18{color:#CA0000;font-size:18px;}

	.p16{font-size:20px;}
	


    .fb-b{color:#000000;font-size:28px;font-weight: bold;}
	.fb-b2{
	color: #000000;
	font-size: 28px;
	font-weight: bold;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #999;
	padding-bottom: 5px;
}
	.fb-b-y{color:#000000;font-size:28px;font-weight: bold;background:#FFFF99;}
	.fr-b{color:#CA0000;font-size:28px;font-weight: bold;}
	.fr-b-y{color:#CA0000;font-size:28px;font-weight: bold;background:#FFFF99;}
	.fb-b-u{color:#000000;font-size:28px;font-weight: bold;text-decoration: underline;}
	.fb-b-y-u{color:#000000;font-size:28px;font-weight: bold;background:#FFFF99;text-decoration: underline;}
	.fr-b-u{color:#CA0000;font-size:28px;font-weight: bold;text-decoration: underline;}
	.fr-b-y-u{color:#CA0000;font-size:28px;font-weight: bold;background:#FFFF99;text-decoration: underline;}
	
	.fb32-b{color:#000000;font-size:32px;font-weight: bold;}
	.fb60-b{color:#000000;font-size:38px;font-weight: bold;}
	.fb32-b-y{color:#000000;font-size:32px;font-weight: bold;background:#FFFF99;}
	.fr32-b{color:#CA0000;font-size:32px;font-weight: bold;line-height: 52px}
	.fr60-b{color:#CA0000;font-size:60px;font-weight: bold;}
	.fr32-b-y{color:#CA0000;font-size:32px;font-weight: bold;background:#FFFF99;}
	.fb32-b-u{color:#000000;font-size:32px;font-weight: bold;text-decoration: underline;}
	.fb32-b-y-u{color:#000000;font-size:32px;font-weight: bold;background:#FFFF99;text-decoration: underline;}
	.fr32-b-u{color:#CA0000;font-size:32px;font-weight: bold;text-decoration: underline;}
	.fr32-b-y-u{color:#CA0000;font-size:32px;font-weight: bold;background:#FFFF99;text-decoration: underline;}

@media only screen and (max-width: 644px){
	.black-b-16{font-size:10px;color:#000000;font-weight: bold;}

	.p16{font-size:13px;}
	
	.gray10{color:#999999;font-size:10px;}
	
	.black-b-y{font-size: 14px; color:#000000;font-weight: bold;background:#FFFF99;}
	
	.fb-b{color:#000000;font-size:20px;font-weight: bold;}
		.fb-b2{
	color: #000000;
	font-size: 22px;
	font-weight: bold;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #999;
		padding-bottom: 5px;
}
	
	.fb-b-y{color:#000000;font-size:22px;font-weight: bold;background:#FFFF99;}
	.fr-b{color:#CA0000;font-size:22px;font-weight: bold;}
	.fr-b-y{color:#CA0000;font-size:22px;font-weight: bold;background:#FFFF99;}
	.fb-b-u{color:#000000;font-size:22px;font-weight: bold;text-decoration: underline;}
	.fb-b-y-u{color:#000000;font-size:22px;font-weight: bold;background:#FFFF99; text-decoration: underline;}
	.fr-b-u{color:#CA0000;font-size:22px;font-weight: bold;text-decoration: underline;}
	.fr-b-y-u{color:#CA0000;font-size:22px;font-weight: bold;background:#FFFF99; text-decoration: underline;}

	.fb32-b{color:#000000;font-size:28px;font-weight: bold;}
	.fb60-b{color:#000000;font-size:23px;font-weight: bold;}
	.fb32-b-y{color:#000000;font-size:28px;font-weight: bold;background:#FFFF99;}
	.fr32-b{color:#CA0000;font-size:28px;font-weight: bold;}
	.fr60-b{color:#CA0000;font-size:28px;font-weight: bold;}
	.fr32-b-y{color:#CA0000;font-size:28px;font-weight: bold;background:#FFFF99;}
	.fb32-b-u{color:#000000;font-size:28px;font-weight: bold;text-decoration: underline;}
	.fb32-b-y-u{color:#000000;font-size:28px;font-weight: bold;background:#FFFF99; text-decoration: underline;}
	.fr32-b-u{color:#CA0000;font-size:28px;font-weight: bold;text-decoration: underline;}
	.fr32-b-y-u{color:#CA0000;font-size:28px;font-weight: bold;background:#FFFF99; text-decoration: underline;}
	.ore{
	color: #FF6600;
	font-size: 18px;
}
.black18{color:#000000;font-size:12px;}
	}
	
	
	
.bold{
 font-weight: bold;
}

.violet {
    color: #8a2891;
}

.brown {
	color: #52270D;
}
.green {
	color: #219328;
}




.serif {
    text-align: center;
	font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5em;
    font-size: 34px;
     font-weight:bold;
    -webkit-margin-before: 0.83em;
    margin-block-start: 0.83em;
    -webkit-margin-after: 0.83em;
    margin-block-end: 0.83em;
}
@media screen and (max-width: 1023px) {
  .serif {
    font-size: 20px;
	  	font-weight: bold;
  }  }







/* ---------------------------------------------------------------------
フォーム部分
--------------------------------------------------------------------- */

.zero {
	line-height: 0em;
}



.form-bg {
	background-color: #451a47;
margin-top: 0px;
padding-top: 50px;
	padding-bottom: 40px;
 z-index:10;
	clear: both;
	text-align: center;
	z-index: 0;
	background-repeat: repeat;
	background-position: center;}

.form-shita{
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-right: 5%;
	padding-bottom: 20px;
	padding-left: 5%;
	line-height: 16px;
	width: 79%;
	text-align: left;
}


@media only screen and (max-width: 644px){
	
.form-bg {
margin-top: -15px;
}
	}



.form-text0 {
	padding-right: 5%;
	padding-left: 5%;
	line-height: 30px;
	font-size: 20px;
	padding-top: 0px;
	padding-bottom: 30px;
	line-height: 1.8em;
	color: #000;
	margin-top:0px;
	background-color: #FFFFFF;
	padding-top: 50px;
	border: thin solid #4E4E4E;
}
.form-text1 {
	line-height: 20px;
}

.form-text {
	padding-right: 50px;
	padding-left: 50px;
	line-height: 30px;
	font-size: 20px;
	padding-top: 30px;
	padding-bottom: 30px;
	line-height: 1.8em;
		color: #fff;
	margin-top: -16px;
}

	

@media only screen and (max-width: 644px){

.form-text0 {
	padding-right: 5%;
	padding-left: 5%;
	margin-right: 5%;
	margin-left: 5%;
	line-height: 30px;
	font-size: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 1.8em;
	color: #000;
	background-color: #FFFFFF;
	margin-top: 12px;
}

.form-bgsp {
	line-height: 30px;
    background-image: url(img/jon-bg.jpg);
	background-size:  cover;
	padding-top: 0px;
	margin-top: -12px;
	margin-bottom: 0px;

}

.form-text {
	padding-right: 6%;
	padding-left: 6%;
	line-height: 30px;
	font-size: 20px;
	line-height: 1.8em;
	padding-top: 30px;
	padding-bottom: 30px;
	margin: 0%;
	width: 88%;
		margin-top: -12px;
}

}






/* ----------------------------
テキストインラインフレーム
----------------------------*/


.text_box{
	height: 70px;
	width: 90%;
	padding: 5%;
	border: 1px solid #CCC;
	overflow: auto;
	font-size: 10px;
	line-height: 16px;
	font-weight: bold;
	background-color: #FFF;
	color: #000;
		
}

.text_box::-webkit-scrollbar{ /* スクロールバー全体 */
    width: 10px;
}

.text_box::-webkit-scrollbar-thumb{ /* スクロールバーのある部分 */
    background: #a8a8a8;

}
.text_box::-webkit-scrollbar-track-piece:start{ /* スクロールバーが表示されてない部分（前） */
    background: #dbdbdb;
}
.text_box::-webkit-scrollbar-track-piece:end{ /* スクロールバーが表示されてない部分（後ろ） */
    background: #dbdbdb;
}

/*左右に三角形をつける*/
.box31{
margin: auto;
padding:2em;
position: relative;
border:1px solid #c6d4c6;
}

.box31:before{
border-bottom:30px solid transparent;
border-left:30px solid #c6d4c6;
content: '';
display: block;
position: absolute;
top: 0px;
left: 0px;
}

.box31:after{
border-left:30px solid transparent;
border-bottom:30px solid #c6d4c6;
content: '';
display: block;
position: absolute;
bottom: 0px;
right: 0px;
}


.google-form-wrap {
  width: 100%;
}

.google-form-wrap iframe {
  width: 100%;
  min-height: 2000px;   /* ← heightではなく min-height */
  border: none;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .google-form-wrap iframe {
    height: 1800px;   /* スマホは縦長なので多め */
  }
}