@charset "utf-8";
/* 全体の設定 */
body {
  font-family: 'Noto Sans JP','Noto Serif JP', sans-serif;
  font-size: 14px;
  width:100%;
  min-width: 375px;
  letter-spacing:0.1em;
}
/* 一部文字だけフォント違うので指定 */
.daimei,.furigana,h3,.sendCheck,.iconText,footer {
  font-family: 'Noto Serif JP','Noto Sans JP', sans-serif;
}
.daimei,.sendCheck ,.iconText{
  font-weight:bold;
}
/* 文字サイズと配置 */
main p {
  line-height:1.8;
}
/* ヘッダー部分作成 */
.main {
  position: relative;
}
header h1{
  margin: 16px 123px 16px 12px;
}
/* 以下ハンバーガメニューのコピペ */
/* メニューを画面上部に固定表示しています */
.gMenu {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}
/* メニューアイコンwを画面右上に固定しています */
.gMenu .menu-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 12px;
  padding-top: 5px;
  height: 12px;
}
/* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
  background-color: #000000; /* 色は自由に変更可能です */
  display: block;
  height: 2px; /* 太さ */
  width: 31px; /* 長さ */
  position: relative;
  transition: background-color .4s ease-out 0; /* 形が変わる時のアニメーション */
}
/* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
  background-color: #000000; /* 色は自由に変更可能です */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .4s ease-out; /* 形が変わる時のアニメーション */
  width: 100%;
}
.gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
/* 表示されるメニューです */
.gMenu .menu {
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  max-height: 0; /* ★最初は高さを0にして非表示状態に */
  transition: max-height .6s; /* 表示されるときのアニメーション */
  text-align: center;
}
/* メニュー部分のデザインです */
.gMenu .menu li:first-of-type {
  padding-top: 100px;
}
.gMenu .menu li a {
  display: block;
  padding: 24px 20px;
  text-decoration: none;
  text-transform: uppercase;
}
.gMenu .menu li a:hover {
  background-color: #f4f4f4;
}
/* チェックボックスは常に非表示です */
.gMenu .menu-btn {
  display: none;
}
/* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
  max-height: 535px; /* ★チェックボックスがオンの時高さを535pxにして表示させます */
  transition: max-height .6s;
}
/* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
/* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {
  transform: rotate(-45deg);top: 0;
}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {
  transform: rotate(45deg);top: 0;
}
/* ページのメインコンテンツ作成 */
/* 一番上の写真編集 */
.heroArea  {
  height:480px;
  width:100%;
  overflow:hidden;
  margin-bottom:32px;
}
.heroArea img {
  height:480px;
  width:100%;
  object-fit:cover;
  object-position: center;
}
/* コンセプトエリア */
main h2 {
  display: block;
  text-align:center;
}
.daimei {
  font-size:28px;
  display:block;
  margin-bottom:8px;
}
.furigana{
  display:flex;
  justify-content:center;
  font-size:12px;
  margin:0 0 24px;
}
.furigana::before , .furigana::after {
  content:"";
  border-top: 1px solid #333333;
  width:60.5px;
  margin:0 8px;
  align-self:center;
}
.conceptArea{
  margin:0 12px 80px;
}
.conceptSmile{
  text-align:center;
  font-size:20px;
  margin-bottom: 16px;
}
.conceptArea p {
  line-height:1.5;
}
/* サービスエリア */
.serviceArea {
  margin:0 12px 80px;
}
.photo ,.explanation p {
  margin-bottom:8px;
}
.photo {
  margin:0 auto;
}
.sampleService h3 {
  font-size:20px;
  text-align: center;
  margin-bottom:8px;
}
/* moreのところ */
.moreArea {
  display:flex;
  justify-content: flex-end;
  margin-bottom:48px;
}
.moreArea::after {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4.75px solid #000000;
  border-right: 0;
  transform: translateY(6px); 
  margin-left: 4px;
}
/*フローエリア */
.flowArea {
  background-color: rgba(32,64,105,0.05);
  padding: 16px 0 12px;
  margin-bottom:80px;
}
.flowArea h2 .furigana{
  color:#b71b26;
}
.flowArea h2 .furigana.furigana::before,
.flowArea h2 .furigana.furigana::after {
  border-top: 1px solid #b71b26;
}
/* フロー留意点。フロー・矢印・フロー・矢印ではなく、（フロー＋矢印）・（フロー＋矢印）である。 */
/* フローを縦に配置する*/
.flowList ul li{
  font-size:16px;
  background-color:#000000;
  color:#ffffff;
  width: 300px;
  height:32px;
  border-radius:20px;
  margin: 12px auto ;
  /* liのflexは、中身の文字の位置を変えるためのもの */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
/* フロー図の三角形 */
.redTri{
  width:0;
  height:0;
  border-style:solid;
  border-right:16px solid transparent;
  border-left:16px solid transparent;
  border-top:16px solid #B71B26;
  margin: 0 auto;
}
/* グラデーション */
.redTriOp60{
  opacity: 0.6;
}
.redTriOp70{
  opacity: 0.7;
}
.redTriOp80{
  opacity: 0.8;
}
.redTriOp90{
  opacity: 0.9;
}
.redTriOp100{
  opacity: 1.0;
}
/* Q＆エリア */
.qaArea {
  margin:0 12px 80px;
}
.qaBox {
  display:flex;
  align-items:center;
  margin-top:16px;
}
.qBoxOne {
  margin-top:24px;
}
.qaText{
  margin-top:6px;
  align-self: flex-start;
}
.qaIcon{
  align-self:flex-start;
  width:36px;
  height:36px;
  border-radius: 50%;
  margin-right:10px;
  color:#ffffff;
  font-size:20px;
  position : relative;
/* なんかFlexにするとなんとかなる。 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
/* ネットのコピペ。Flexは親要素の中の子要素を広げるような用法？ */
  flex:0 0 36px;
}
.iconText {
  position: absolute;
  top:5px;
  left:5px;
}
.q{
  background-color:#000000;
}
.a {
  background-color: #B71B26;
}
/* QA終了 */
/* この部分が送信フォーム */
form {
  text-align: center;
}
.formArea {
  background-color: rgba(32,64,105,0.15);
  padding : 16px 0;
  margin-bottom:80px;
}
.formRow {
  margin:0 12px 24px;
}
.label {
  display:block;
  margin-bottom:10px;
  font-weight:bold;
  font-size:16px;
}
.requireMark {
  margin-left:4px;
  color:#ffffff;
  font-size:10px;
  padding: 3px 9px;
  background-color:#B71B26;
  font-weight:bold;
  border-radius:8px;
  vertical-align: 2px;
}
.radio {
  display:flex;
  margin-top:18px;
  justify-content: center;
  gap : 40px;
}
input[type="radio"] {
  height:16px;
  width:16px;
}
.radioText {
  margin-left:4px;
}
.inputField {
  height:32px;
}
input[type="text"],input[type="email"],input[type="tel"],
textarea {
  width:100%;
  background-color: #ffffff;
  text-align:left;
  font-size:14px;
}
 .postForm {
  display: flex;
  width:125px;
  height:30px;
  margin-bottom:8px;
}
.postForm .postCode {
  width:125px;
  margin-left:4px;
}
.postMark {
  margin:8px 4px 8px 0;
}
.addressForm {
  display: flex;
}
.inquiryField {
  height:120px;
}
.sendButton {
  background-color:#000000;
  color:#ffffff;
  width: 200px;
  height:48px;
  font-size:16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin : 0 auto;
  position:relative;
}
.sendButton::after {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ffffff;
  border-right: 0;
  position: absolute;
  right:16.5px;
  bottom:19px;
}
.sendCheck {
  width: 200px;
  height:48px;
}
/* 画面下部の四角マーク */
.linkMark {
  position:relative;
  background-color:#000000;
  width:46px;
  height: 46px;
  justify-content: flex-end;
  left:317px;
  right:12px;
  bottom:0;
}
.arrow_top {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15px;
  margin-top:15.5px;
  margin-left:8px;
}
.arrow_top::before,
.arrow_top::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 21px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% 1px;
}
.arrow_top::before {
  transform: rotate(49.75deg);
}
.arrow_top::after {
  transform: rotate(-49.75deg);
}
/* フッター部分作成 */
footer {
  height:45px;
  background-color: #333333;
  color:#ffffff;
  text-align:center;
  padding: 16px 20px 16px;
  font-size:13px;
}
footer small{
  font-size:12px;
}


/* ここからPC版 */
@media screen and (min-width:768px){

h1 img {content: url(../images/logo_pc.svg);
}
/* マウスホバー追加 */
header .gMenu .menu li a:hover {
  background-color: #ffffff;
  text-decoration: underline 2px solid #223E69;
}
/* ここはハンバーガーメニューの打ち消し */
header {
  display:flex;
}
.menu-icon , .menu-btn {
  display: none;
}
.gMenu {
  display: flex;
  position:static;
  background-color: #ffffff;
  overflow: visible;
  max-height:none;
  align-items: center;
  justify-content: flex-end;
}
.gMenu .menu {
  color:#000000;
  display: flex;
  max-height:none;
  height:32px;
  padding:0;
}
.gMenu .menu li:first-of-type{
  padding-top:0;
}
/* 以下の部分はPC版のメニューの配置とマウスオーバー */
.gMenu .menu li  {
  align-self: center;
  gap:40px;
}
header .gMenu .menu a:hover {
  text-decoration: underline double #223E69;
  transform: scale(1.5) translateY(-5px);
  transition-property: transform,translate;
  transition-duration:.4s ;
  transition-delay:0;
  transition-timing-function:ease-out;
}
/* メインエリアの修正 */
body {
  font-size: 16px;
  width:100%;
  min-width:1366px;
}
/* explanationのpとfuriganaとmoreは16pxなのでこれで良し */
.logodesign {
  margin:24px;
}
.label {
  font-size:20px;
}
/* メイン画像のところ*/
main .heroArea img {
  height:545px;
  width:100%;
  object-fit:cover;
  object-position:center 50%;
}
.heroArea {
  margin-bottom:160px;
}
/* コンセプトと配置 */
.daimei {
  font-size:42px;
  margin-bottom:16px;
}
.furigana {
  font-size:16px;
  margin:0 0 48px;
}
/* 線の長さは一緒 */
/* コンセプトのエリア */
.conceptArea  {
  width:1020px;
  margin:0 auto 160px;
  }
.conceptSmile{
  font-size:28px;
  margin-bottom: 24px;
}
/* サービスエリアの場所 */
.serviceArea {
  width:1020px;
  margin:0 auto;
  margin-bottom:160px;
}
.serviceAreaPC {
  display:flex;
  justify-content: space-between;
}
.sampleService {
  width: 300px;
}
.photo img {
  width : 300px;
}
.photo {
  margin-bottom:16px;
}
.serviceAreaPC h3 {
  font-size:24px;
  text-align:center;
  margin-bottom:16px;
}
.explanation p {
  margin-bottom:16px;
}
/* フローエリア */
.flowArea {
  margin-bottom:160px;
}
.flowList ul {
  display:flex;
  padding-bottom:48px;
  justify-content: center;
}
.flowList ul li{
  font-size:28px;
  width: 60px;
  height:280px;
  border-radius:60px;
  margin: auto 12px;
  justify-content: center;
  align-items: center;
  padding: 0;
/* 横書きから縦書きへ変更する。ネットのコピペ。理解するか、あとで代替案を探すこと */
  writing-mode: vertical-rl;
}
.redTri{
  border-style:solid;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #b71b26;
  border-right: 0;
  margin: auto 41px;
}
/* グラデーションそのまま */
/* Q&AエリアやっぱりQ＆Aの部分はわからない。強引にやるが、後日ちょうどいい位置の並べ方をちゃんと学ぶこと */
/* Q＆エリア */
.qaRow {
  margin-bottom:48px;
}
.iconText {
  top:1px;
  left:8px;
}
.qaText{
  margin-top:12px;
  align-self: flex-start;
  font-size:20px;
  margin-bottom:28px;
}
.qaBox {
  display:flex;
  align-items:flex-start;
}
.qaArea {
  width:1020px;
  margin:0 auto 160px;
}
.qaIcon{
  width:52px;
  height:52px;
  margin-right:8px;
  font-size:34px;
  flex:0 0 52px;
}
/* ここからフォームエリア */
.formArea {
  padding-top : 48px;
  padding-bottom: 0;
  background-color: rgba(32,64,105,0.15);
  margin-bottom:160px;
  height:1240px;
}
.formBg {
  font-size:20px;
  width:1020px;
  background-color:rgba(255,255,255,0.7);
  margin:0 auto;
  margin-bottom:48px;
  padding:48px 24px 48px 0;
}
.formRow {
  display:flex;
  margin:0 0 24px;
}
.inputField {
  height:52px;
}
.formRow .shortSize {
  width : 332px;
}
.formRow .longSize {
  width:664px;
}
.radio {
  margin-top:0;
}
.radioText {
  margin-left:4px;
  vertical-align:top;
}
.label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width:332px;
  padding-right:12px;
  transform: translateY(3px); 
}
.label.noReq {
  padding-right:64px;
  align-self:flex-start;
}
/* スマホで作成した枠線のキャンセルを行う。 */
input[type="radio"] {
  height:24px;
  width:24px;
}
.postFormRow {
  display:flex;
}
.labelAddress {
  align-self:flex-start;
  transform: translateY(15.5px); 
}
.addressForm {
  width:332px;
}
.postMark{
  margin:16px 4px 16px 0;
}
.postForm  {
  width:100%;
  height:52px;
  padding-left:0;
  margin-bottom:24px;
  display: flex;
  margin-left:0;
}
.postForm .postCode {
  width:222px;
  margin-left:4px;
}
.inquiryField {
  border:0px solid #000000;
  height:208px;
}
.sendButton {
  font-size:20px;
  width: 300px;
  height:68px;
  margin:48px auto 0 ;
}
.sendButton::after {
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9.5px solid #ffffff;
  border-right: 0;
  margin-left:8px;
  right:45.5px;
  bottom:24px;
}
.sendCheck {
  width: 300px;
  height:68px;
}
.sendButton :hover {
  background-color: #ffffff;
  color:#000000;
  border:1px solid #000000;
  font-weight:bold;
  font-size:30px;
  transition:all .2s ease-out ;
}
/* ここがしたのマーク */
.linkMark {
  position:relative;
  background-color:#000000;
  width:60px;
  height: 60px;
  left:1274px;
  bottom:0;
}
.arrow_top {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-top:19px;
  margin-left:10px;
}
.arrow_top::before,
.arrow_top::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 30px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% 1px;
}
.arrow_top::before {
  transform: rotate(49.75deg);
}
.arrow_top::after {
  transform: rotate(-49.75deg);
}
/*　ここフッターー */
footer {
  height:62px;
  font-size:14px;
  padding:24px 0;
}
footer small{
  font-size:14px;
}
}