/*
Theme Name: homepage
Theme URI: 3.112.250.109
Description: homepage
Author: horizonsoft
Author URI: 3.112.250.109
Version: 1.0.0
*/
@CHARSET "UTF-8";

/* 動作に関する仕様書が一度も提示されなかったので */
/* ボタン等の動作は全て類推で実装されています */

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-feature-settings: "palt";
}

/*** ページ全体 */
body{
  /* 全体の設定 */
  font-size:1rem;
  line-height:1.4rem;
  font-family:"Noto Sans Japanese", sans-serif;

  /* 色 */
  color:#000000;
  background-color:#ffffff;
}

/* リンク文字 */
a{
  color: #000000;
  text-decoration: none;
}
a:hover{
  color: #e07a22;
}

/* オレンジ色のテキスト */
.orangetext{
  color: #e07a22;
}

/* 白のテキスト */
.whitetext{
  color: #ffffff;
}

/* 背景色gainsboro（うすいグレイ） */
.background_gainsboro{
background-color: #dcdcdc;
}

/* 若干大きい文字 */
.largetext{
  font-size: 1.4rem;
  margin-bottom: 8px;
}

/* 太い文字 */
.weightfont{
  font-weight: 500;
}
.boldtext{
  font-weight: bold;
}
.expandtext{
  font-weight: 800;
}

/* 黒い線 */
.backline{
  border-top: 1px solid #000000;
}

/* 横幅固定用枠 */
#wrapbox{
  width: 1024px;
  margin: 0 auto;
}

/* 追従式TOPへ戻るボタン(仕様外・提案部品) */
#go_top{
  display: block;
  position: fixed;
  top: 32px;
  right: calc(50% - 512px - 80px);
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  padding: 24px 8px;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
}

#go_top:hover{
  background-color: #FFCA30;
}

/*** スマホ画面用 */
#switch{
  display: none;
}

/*** ヘッダー部 */
/* 親:relative, 子absoluteで調整 */
#headerbox{
  position: relative;
  border-bottom: 1px solid #aaaaaa;
  height:110px;
}

/* ロゴ */
#logobox{
  position: absolute;
  display: block;
  left: 16px;
  top: 8px;
  background-image: url(pic/logo.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  height:100px;
  width:200px;
}

/* メニュー全体 */
#menubox{
  position: absolute;
  right: 32px;
  top: 48px;
  display:flex;
  justify-content: space-between;
  font-size:0.9rem;
}

/* 現在のページ */
.activemenu{
  color:#e07a22;
  padding: 0 8px;
}

/* 他のページ */
.linkmenu{
  color:#000000;
  text-decoration:none;
  padding: 0 8px;
}

/* マウスオーバー */
.linkmenu:hover{
  color:#e07a22;
  text-decoration:none;
}

/********************* 本文 ********************/
/* ページタイトル */
.titlebox{
  margin:32px auto 0 auto;
  margin-bottom: 24px;
  text-align: center;
  font-family: 'Oswald', "Noto Sans Japanese", sans-serif;
  display: table;
}

/* 英語部分 */
.titlebox .mainbox{
  font-size: 2.4rem;
  font-weight: 500;
  color: #393a3b;
  display: table-cell;
  vertical-align: middle;
}

.titlebox .mainbox::first-letter{
  color: #e07a22;
}

/* 日本語部分 */
.titlebox .subbox{
  font-size: 1.5rem;
  font-weight: 400;
  display: table-cell;
  vertical-align: middle;
  padding-left: 16px;
}

/* カバー画像 */
#coverbox{
  background-size: cover;
  width: 100%;
}

/* 通常コンテンツの幅(幅の固定) */
.contentsbox{
  width: 944px;
  margin: auto;
}

/* 中央寄せテキスト */
.centertextbox{
  text-align: center;
}

/*** 画像とテキストの二分割 */
.tablebox{
  display: table;
}

.tableleftbox{
  display: table-cell;
  vertical-align: top;
}

.tablerightbox{
  display: table-cell;
  vertical-align: top;
  padding-left: 32px;
}

.tabletitlebox{
  font-size: 1.8rem;
  font-weight: 800;
  color: #393a3b;
  margin-bottom:32px;
}

/*** tabletitleboxのmargin */ 
.tabletitleboxMarginMin{
  font-size: 1.8rem;
  font-weight: 800;
  color: #393a3b;
  margin-bottom:16px;
}

.tabletextbox{
  font-size: 0.78rem;
}

/*** 区切りの小さいブロック模様 */
.centerblock{
  height: 80px;
  background-image: url(pic/blocks.gif);
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 32px;
  margin-bottom: 32px;
}

/*** サブタイトル */
.subtitlebox{
  font-size: 1.8rem;
  color: #393a3b;
  margin-bottom: 24px;
  text-align: center;
  font-family: 'Fjalla One', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

/* 上部マージン(親要素用) */
.topmargin{
  padding-top:48px;
}

/* 上部下部マージン(親要素用) */
.marginbox{
  padding:24px 0;
}

/* 上部マージン(小・直接) */
/* CSSの使用によりblock要素内の最初の要素に設定すると機能しない */
.topspace_small{
  margin-top: 8px;
}

.topspace_middle{
  margin-top: 16px;
}

/*** 説明文 */
.explaintextbox{
  text-align: center;
}

/*** コンテンツ枠一杯の画像 */
.centerimage{
  margin:auto;
}

/*** 均等割枠 */
.flexbox{
  display: flex;
  justify-content: space-between;
}

/*** 折返しflexbox */
.wrapflexbox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/*** 中央寄せflexbox */
.centerflexbox{
  display: flex;
  justify-content: space-around;;
  margin: auto;
}

.flexcellbox{
  position: relative;
}

/* 見出し文章 */
.headline{
  font-size: 2.4rem;
  font-weight: 800;
  color: #393a3b;
  line-height: normal;
}

/*** TOPへ戻るボタン */
.returntopbutton{
  display: block;
  margin:18px auto;
  text-decoration: none;
  color: #000000;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

/********** トップページ *****************************************/

/* トップページカバー画像 */
.cover_top{
  background-image: url(pic/top/cover.jpg);
  width:1024px;
  height:540px;
}

/* 左右にブロックがある背景 */
.sideblockbox{
  background-image: url(pic/blocks_side.gif);
  width: 100%;
  height: 301px;
  line-height: 2rem;
  background-size:cover;
}

/*** INFORMATION */
/* 全体の枠 */
.informationbox{
  padding: 8px 16px;
  overflow: scroll;
  width: 100%;
  height: 200px;
  font-size:0.8rem;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

/* 1行ごとの枠 */
.informationbox .itembox{
  display: table;
  border-bottom: 1px dotted #393A3B;
  width:100%;
  margin: 8px 0;
}

/* 日付の枠 */
.informationbox .datebox{
  display: table-cell;
  width: 8em;
  vertical-align: top;
}

/* 内容の枠 */
.informationbox .infobox{
  display: table-cell;
  vertical-align: top;
  padding-bottom: 8px;
}

/** ページの背景(下部) */
.toppageback{
  background-image: url(pic/top/background_bottom.jpg);
  background-position: bottom center;
  background-repeat: no-repeat;
}

/*** ページ下部の別ページへのリンク */
.bottomrecruitbutton{
  background-image: url(pic/top/career_back.png);
}
.bottomphilosophybutton{
  background-image: url(pic/top/philosophy_back.jpg);
}
.bottombusinessbutton{
  background-image: url(pic/top/business_back.jpg);
}
.bottompartnerbutton{
  background-image: url(pic/top/partner_back.jpg);
}

/* 背景だけがズームするボタン */
.zoombutton{
  display: block;
  border-radius: 8px;
  border: 2px solid #ffffff;
  background-size: 200px 200px;
  transition:all 0.1s ease-out;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  width: 200px;
  height: 200px;
  padding-top: 80px;
}

.zoombutton:hover{
  background-size: 250px 250px;
}

/************** PAGE 会社概要 *****************************************/

/* カバー写真 */
.cover_overview{
  background-image: url(pic/overview/cover_overview.jpg);
  height:415px;
}

/* プロフィール */
.profbox{
  background-image: url(pic/overview/profback.jpg);
  background-size: cover;
  width: 100%;
  height: 452px;
}

.proftablebox{
  display: flex;
  flex-wrap: wrap;
  margin: 0 200px 0 256px;
  font-size: 0.8rem;
  padding-top: 16px;
}

.proftablebox .namebox{
  flex-basis: 20%;
  border-bottom: 1px dotted #000000;
  padding: 4px 0;
}

.proftablebox .namebox.lastbox{
  border-bottom: none;
}

.proftablebox .databox{
  flex-basis: 80%;
  border-bottom: 1px dotted #000000;
  padding: 4px 0;
}

.proftablebox .databox.lastbox{
  border-bottom: none;
}

/*** アクセスマップ */
/* 左右分割枠 */
.officebox{
  width:48%;
  margin-bottom:32px;
  font-size: 0.9rem;
}

/* オフィス名 */
.officebox .namebox{
  font-size: 1.3rem;
  font-weight: 500;
  color: #393a3b;
  margin-bottom: 16px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05rem;
}

.officebox .mapbox{
  width: 100%;
  margin-bottom: 16px;
}

.officebox .gmap{
  width: 100%;
  height: 260px;
}

/************** PAGE 採用情報 **************************************/
/* カバー写真 (中にボタンが入る) */
.cover_recruit{
  background-image: url(pic/recruit/cover_recruit.jpg);
  height: 415px;
  padding-top: 300px;
}

/* カバー写真内のボタン */
.coverbuttonsbox{
  text-align:center;
}

.coverbutton{
  display: inline-block;
  width: 240px;
  text-align: center;
  padding: 8px 0;
  margin: 0 8px;
  background-color: #ffffff;
}

.coverbutton:hover{
  background-color: #ffcc33;
}


/* 得られるものの画像 */
.melitbox{
  width: 25%;
  padding:0 8px;
}

.melitbox img{
  width: 100%;
  height: auto;
}


/* 横並びのボタン */
.flexboxbutton{
  display: block;
  position: absolute;
  width: 80px;
  left: calc(50% - 40px);
  bottom: 24px;
  background-color: #e07a22;
  color: #ffffff;
  border-radius: 16px;
  padding: 2px;
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
}

.flexboxbutton:hover{
  background-color: #FFDA1A;
}

.flexpic{
  width:224px;
}

/***  灰色の枠 */
.graybox{
  background-color: #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  font-size:0.75rem;
}

/*** 点線 */
.dotsbottombox{
  border-bottom: 1px dotted #000000;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

/* 画像が横にある枠の中の装飾 */
.tabletextbox .largetext{
  font-size: 1.1rem;
  line-height: 1.5rem;
  margin-bottom: 8px;
}

.tabletextbox p{
  margin-bottom: 8px;
  padding-left:1em;
  text-indent:-1em;
}


/*** フォトギャラリー用  */
.galleryflexbox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gallerycellbox{
  display: block;
  width: 33%;
}

.galleryflexpic{
  width: 100%;
  height: auto;
}

/*** ブログ用のリンクボタン  */
.blogbutton{
  display: block;
  background-image: url(pic/recruit/button_blog.jpg);
  width: 552px;
  height: 82px;
  margin: 32px auto 8px auto;
  border-radius: 8px;
}

.blogbutton:hover{
  background-image: url(pic/recruit/button_blog_on.jpg);
}

/*** 3つのボタン */
.flexlinkbutton{
  display: block;
  width: 33%;
}

.flexlinkbutton img{
  width: 100%;
  height: auto;
}

.se_button{
  padding-top: 24px;
  background-image: url("pic/recruit/se_back.jpg");
}

.plpm_button{
  padding-top: 24px;
  background-image: url("pic/recruit/plpm_back.jpg");
}

.o40_button{
  padding-top: 24px;
  background-image: url("pic/recruit/o40_back.jpg");
}

.zoombutton2{
  width: 310px;
  height: 234px;
  background-size: 310px 234px;
  background-position: center center;
  text-align: center;
  border-radius: 8px;

  display: block;
  border: 3px solid #ffffff;
  transition:all 0.1s ease-out;

  background-repeat: no-repeat;
}

.zoombutton2:hover{
  background-size: 403px 304px;
}

.zoombutton2 img{
  width: auto;
  height: auto;
}

/*** ページの背景(下部) */
.recruitpageback{
  background-image: url(pic/recruit/back_recruit.jpg);
  background-position: bottom center;
  background-repeat: no-repeat;
}

/************** PAGE SE/PLPM/Over40 ********************************/
/* PLPM/Over40固有は下に */

/* スライド */
.cover_se{
	width: 100%;
	height: 415px;
	background-position:center center;
	background-size: cover;
  background-repeat: no-repeat;
}

/* カバー写真直下の背景 */
.nextstepbox{
  width: 100%;
  height: 536px;
  background-image: url(pic/se/nextstep.jpg);
  padding-top: 420px;
  line-height: 1.8rem;
  font-size: 0.9rem;
}

/*** エントリーボタン */
.entrybutton{
  display: block;
  width: 540px;
  height: 80px;
  margin: 32px auto;
  background-image: url(pic/se/button_entry.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffffff;
  border: 2px solid #e07a22;
  border-radius: 8px;
  padding:8px;
}

.entrybutton:hover{
  background-color: #FFBC4D;
}

/* 目の背景(ホライズンソフトで得られるもの) */
.eyebox{
  width: 100%;
  height: 536px;
  background-image: url(pic/se/eyeback.jpg);
  padding: 32px 64px 0 64px;
  line-height: 1.8rem;
  font-size: 0.9rem;
}

/*** 4分割枠内の設定 */
.fourbox{
  width: 49%;
  border: 2px solid #e07a22;
  border-radius: 8px;
  background-color: #ffffff;
  padding: 16px;
  margin-bottom: 16px;
}

/* 見出しの文字のサイズと太さ */
.fourbox .captionbox{
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 24px;
  color: #393a3b;
}


/* 縦位置中央寄せ */
.fourbox .tableleftbox, .fourbox .tablerightbox{
  vertical-align: middle;
}

/* 文章のフォントサイズ */
.fourbox .tablerightbox{
  font-size: 0.7rem;
  line-height: 1.2rem;
}

/*** 業務内容 */
/* 全体の枠 */
.workbox{
  border: 1px solid #393A3B;
  padding: 8px 16px;
  width: 100%;
  border-radius: 8px;
  line-height: 2rem;
}

/* 1行ごとの枠 */
.workbox .itembox{
  display: table;
  border-bottom: 1px dotted #393A3B;
  margin: 8px 0;
  width: 100%;
}

.workbox .itembox.lastbox{
  border: none;
}

/* 項目名 */
.workbox .namebox{
  display: table-cell;
  width: 5em;
  vertical-align: top;
  padding-left:1em;
  font-weight: 700;
}

/* 内容 */
.workbox .infobox{
  display: table-cell;
  vertical-align: top;
  padding-bottom: 8px;
}

/*** INTERVIEW */
/* 全体枠 (中身はすべてabsolute表示) */
.interviewbox{
  position: relative;
}

/* 全体枠のSEでの高さ */
/* 中身が全てabsoluteなので明示しないと上に詰まる */
.height_se{
  height: 1364px;
}

/* プロフィールの枠 */
.interviewbox .personbox{
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
}

.interviewbox .personbox .infobox{
  padding-left: 16px;
}

/* 最初のインタビューの枠 */
.interviewbox .firstbox{
  position: absolute;
  left: 270px;
  top: 0;
  font-size: 0.9rem;
}

/* 最初のインタビュー枠のタイトル */
.interviewtitlebox{
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 800;
  color: #e07a22;
  margin-bottom: 16px;
}

/* インタビュー枠の途中のタイトル */
.interviewsubtitlebox{
  font-size: 1rem;
  font-weight: 700;
  color: #e07a22;
  margin-bottom: 4px;
}

/* 写真の枠 */
.interviewbox .photobox{
  position: absolute;
  left: 0;
  top: 540px;
}

/* 残りのインタビューの枠 */
.interviewbox .lastbox{
  position: absolute;
  left: 270px;
  font-size: 0.9rem;
}

/* 残りのインタビュー枠のSEでの縦位置 */
.last_height_se{
  top: 630px;
}

/*** 募集要項 */
.jobbox{
  border: 2px solid #e07a22;
  border-left: none;
  border-right: none;
  margin-bottom: 32px;
}

.jobbox .itembox{
  display: table;
  width: 100%;
}

.jobbox .itembox .namebox{
  display: table-cell;
  width: 8em;
  color: #e07a22;
  font-weight: 700;
  padding: 8px;
  padding-left: 1em;
}

.jobbox .itembox .infobox{
  display: table-cell;
  padding: 8px;
}

.jobbox .orangeback{
  background-color: #f9e4d3;
}

/*** 下部の2つのボタン */
.doublelinkbutton{
  display: block;
  width: 49%;
}

.doublelinkbutton img{
  width: 100%;
  height: auto;
}

.se_button2{
  padding-top: 4px;
  background-image: url("pic/se/se_back2.png");
}

.plpm_button2{
  padding-top: 4px;
  background-image: url("pic/se/plpm_back2.png");
}

.o40_button2{
  padding-top: 0;
  background-image: url("pic/se/o40_back2.png");
}

.zoombutton3{
  width: 460px;
  height: 220px;
  background-size: 460px 220px;
  background-position: center center;
  text-align: center;

  display: block;
  border-radius: 4px;
  border: 3px solid #ffffff;
  transition:all 0.1s ease-out;

  background-repeat: no-repeat;
}

.zoombutton3:hover{
  background-size: 598px 286px;
}

.zoombutton3 img{
  width: auto;
  height: auto;
}

/************* PLPM固有 *******************************************/
/* カバー写真PLPM */
.cover_plpm{
  height: 415px;
}

.plpmtopbox{
  width: 100%;
  height: 536px;
  background-image: url(pic/plpm/plpmtop.jpg);
  padding-top: 420px;
  line-height: 1.8rem;
  font-size: 0.9rem;
}

/* 全体枠のPLPMでの高さ */
/* 中身が全てabsoluteなので明示しないと上に詰まる */
.height_plpm{
  height: 1264px;
}

/* 残りのインタビュー枠のPLPMでの縦位置 */
.last_height_plpm{
  top: 396px;
}

/************* Over40固有 *******************************************/
/* カバー写真PLPM */
.cover_o40{
  background-image: url(pic/over40/cover_over40.jpg);
  height: 415px;
}

.o40topbox{
  width: 100%;
  height: 536px;
  background-image: url(pic/over40/over40top.jpg);
  padding-top: 410px;
  line-height: 1.8rem;
  font-size: 0.9rem;
}

/* 全体枠のover40での高さ */
/* 中身が全てabsoluteなので明示しないと上に詰まる */
.height_o40{
  height: 1264px;
}

/* 残りのインタビュー枠のo40での縦位置 */
.last_height_o40{
  top: 620px;
}
/************** PAGE 理念・コンセプト *****************************************/

/* カバー写真 */
.cover_concept{
  background-image: url(pic/concept/concept_main.png);
  height:415px;
  padding-top: 300px;
}

/* 表のタイトル */
.tabletitlebox_concept{
  font-size: 1.5rem;
  font-weight: 800;
  color: #393a3b;
  margin-bottom:16px;
}

/* 箇条書き */
.itemization_concept{
  font-size: 1rem;
}

/************** PAGE 事業紹介 *****************************************/

/* カバー写真 */
.cover_business{
  background-image: url(pic/business/business_main.png);
  height:415px;
  padding-top: 300px;
}

/* ビジネス用 テーブル左設定 */
.business_left_box{
  padding-top: 4px;
  width: 450px;
  vertical-align: middle;
}

/* ビジネス用 サブタイトル */
.businessSubTitleText{
  color: #ffffff;
  font-weight: bold;
  font-size: 1.4rem;
  margin: 12px 0px 12px 0px;
  text-align: center;
  line-height:1.5
}

/* ビジネス用 テキスト */
.businessText{
  font-size: 1rem;
  margin: 6px 6px 6px 6px;
}

/* ビジネス用テキストボックステキストEC */
.tabletextboxbusinessEc{
  font-size: 0.78rem;
  margin: 8px 32px 8px 32px;
}

/* ビジネス用テキストボックステキスト */
.tabletextboxbusiness{
  font-size: 0.78rem;
  margin: 8px 8px 8px 0px;
}

.case1_1{
  background-image: url(pic/business/case1_1.png);
  background-size: cover;
}
.case1_2{
  background-image: url(pic/business/case1-2.png);
  background-size: cover;
}
.case1_3{
  background-image: url(pic/business/case1-3.png);
  background-size: cover;
}
.case1_4{
  background-image: url(pic/business/case1-4.png);
  background-size: cover;
}
.case1_5{
  background-image: url(pic/business/case1-5.png);
  background-size: cover;
}
.case1_6{
  background-image: url(pic/business/case1-6.png);
  background-size: cover;
}
.case2_1{
  background-image: url(pic/business/case2-1.png);
  background-size: cover;
}
.case2_2{
  background-image: url(pic/business/case2-2.png);
  background-size: cover;
}
.case2_3{
  background-image: url(pic/business/case2-3.png);
  background-size: cover;
}
/************** PAGE パートナー募集 *****************************************/

/* カバー写真 */
.cover_partner{
  background-image: url(pic/partner/partner_main.png);
  height:415px;
  padding-top: 300px;
}

/* 特徴の背景 */
.featurebox{
/*  width: 1024px; */
  background-image: url(pic/partner/back1.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 16px 64px 0px 64px;
  font-size: 0.9rem;
}

/* メリットの背景 */
.meritbox{
/*  width: 1024px; */
  background-image: url(pic/partner/back2.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 32px 64px 0px 64px;
  font-size: 0.9rem;
}

/*** 分割枠内の設定 */
.partnerFourbox{
  width: 49%;
  border: 2px solid #e07a22;
  background-color: #ffffff;
  margin-bottom: 16px;
}

.partnerFourbox .tableleftbox{
  width: 150px;
  display: table-cell;
  vertical-align: middle;
}

.partnerFourbox .tablerightbox{
  display: table-cell;
  vertical-align: top;
  padding: 16px 8px 8px 8px;
}

.partnerimg{
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* プロジェクト事例 */
.casebox{
  width:48%;
  margin-bottom:32px;
  font-size: 0.9rem;
}

.casebox .imgbox{
  width: 100%;
  margin-bottom: 16px;
}

.casebox .case1button{
  display: block;
  background-image: url(pic/partner/case1.png);
  background-size:contain;
  width: 460px;
  height: 160px;
  background-repeat: no-repeat;
}

.casebox .case2button{
  display: block;
  background-image: url(pic/partner/case2.png);
  background-size:contain;
  width: 460px;
  height: 160px;
  background-repeat: no-repeat;
}


/*** 問い合わせ用のリンクボタン  */
.querybutton{
  display: block;
  background-image: url(pic/partner/otoiawase.png);
  background-size:contain;
  width: 520px;
  height: 80px;
  margin: 8px auto 8px auto;
}

.querybutton:hover{
  background-image: url(pic/partner/otoiawase.png);
}

/***************** 問い合わせフォーム *****************************/

/* 注意書き */
.noticebox{
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 32px;
}

/* フォーム用横並び枠 */
.formtablebox{
  display: table;
  width: 100%;
  border-top: 1px solid #000000;
  background-color: #ffffff;
}

/* 項目名側 */
.formtablebox .namebox{
  display: table-cell;
  width: 30%;
  background-color: #cccccc;
  vertical-align: middle;
}

.formtablebox .namebox .wordbox{
  display: inline-block;
  width: 68%;
  font-size: 0.9rem;
  padding-left: 16px;
}

.formtablebox .namebox .markbox{
  display: inline-block;
  width: 30%;
}

.formtablebox .namebox .essential{
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: #e07a22;
  font-size: 0.9rem;
}

/* フォーム側 */
.formtablebox .inputbox{
  display: table-cell;
  width: 75%;
  vertical-align: middle;
}

.formtablebox input[type="text"]:focus, textarea:focus{
  background-color: #ffffcc;
}

.formtablebox .inputbox .doubleform1{
  width: 44%;
  margin:16px 1% 16px 3%;
  padding: 8px
}

.formtablebox .inputbox .nameerrorbox{
  display: flex;
  width: 100%;
}

.formtablebox .inputbox .name1error, .formtablebox .inputbox .name2error{
  text-align: left;
  width: 48%
}

.formtablebox .inputbox .kanaerrorbox{
  display: flex;
  width: 100%;
}

.formtablebox .inputbox .kana1error, .formtablebox .inputbox .kana2error{
  text-align: left;
  width: 48%
}


.formtablebox .inputbox .doubleform2{
  width: 44%;
  margin:16px 2% 16px 1%;
  padding: 8px
}

.formtablebox .inputbox .dateform{
  margin:16px 3%;
  padding: 8px
}

.formtablebox .inputbox .sexchecklabel{
  display: inline-block;
  margin: 16px 6% 16px 3%;
  padding: 8px
}

.formtablebox .inputbox .singleform{
  width: 92%;
  margin:16px 1% 16px 3%;
  padding: 8px
}

.formtablebox .inputbox .commentform{
  width: 92%;
  height:150px;
  margin:16px 1% 16px 3%;
  padding: 8px
}

.formtablebox.lastbox{
  border-bottom: 1px solid #000000;
}

#submitbutton{
  display: block;
  border: none;
  margin: 32px auto 0 auto;
  background-image: url(pic/form/submitbutton.jpg);
  background-size: cover;
  width: 514px;
  height: 100px;
  cursor: pointer;
}

.errorbox{
  color: #ff0000;
  font-size:0.8rem;
  margin-left: 32px;
  margin-bottom:16px;
  font-weight: 700;
}

.scrollbox{
  width: 80%;
  height: 150px;
  font-size: 0.8rem;
  border: 1px solid #000000;
  padding: 16px 64px;
  overflow: scroll;
  margin: auto;
  text-align: left;
  font-weight: normal;
}

/***************** 画面下部 ****************************************/
/* 追加でTELとMailを別行にするよう指示あり */
#bottombox{
  background-color: #f6d7bb;
  background-image: url(pic/bottomback.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  text-align:center;
  margin: 8px auto 0 auto;
  height: 150px;
  width:1024px;
}

.bottom1{
  padding-top: 12px;
  font-size: 1rem;
  font-weight: 700;
}

.bottom2{
  margin-top: 3px;
  font-size: 0.85rem;
}

.bottom3{
  margin-top: 3px;
  font-size: 0.85rem;
}

.bottom3 a{
  text-decoration: underline;
}

.bottom4{
  margin-top:14px;
  padding-bottom:16px;
  font-size:0.7rem;
}