@charset "UTF-8";

/* @import url("reset.css"); */

#contents{
	margin-bottom:0 !important;
	padding:0 !important;
}

.col-2{
	display:flex;
	gap:20px;
	align-items: center;
}

th, td {
	margin:10px; 
}


h2,h3,h4,strong{
	margin-bottom:1.5rem;
	font-size:1.5rem;
}



h2{
	background:#2e3192;
	color:#fff;
	padding:10px 20px;
	font-weight:900;
}


.menu h2{
	padding:20px 10px;
	font-size:200% !important;
}

.menu h2::before{
	content:"";
	border:3px #fff solid;
	margin-right:20px;
}



.menu h3{
	background:#e5f1f8 !important;
	color:#2e3192 !important;
}



section{
	margin-bottom:3.5rem;
}


.catalog{
	line-height:1.8;
	font-family:"icomoon","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
	max-width: 800px;
	font-size: 13px; /* .shinsei内の基本フォントサイズを設定 */
  margin:auto;
}


.first p {
	font-size:1.3rem;
	font-weight:600;
}

.first h1{
	font-size:2rem;
	margin-bottom:-10px;
	font-weight:600;
}


.first h1,.first p
{
	color:#2e3192;
	text-align:center;
}

.first p b{
	color:#f15a24;
}




/*(サービスの利用条件)*/
.first small{
	display:block;
	border:dashed #000 1px;
	padding:10px;
	border-radius:10px;
	margin-top: 1.5rem;
}


h2 + p{
	font-size:1.2rem;
	margin-bottom:10px;
}


#slide01,#slide02,#slide03,#slide04,#slide05{
	margin:0 auto 50px auto !important;
	padding:0 !important;
	max-width:650px;
}


/* 当サービスの特徴 / 選ばれる理由 */

.reason{
	margin:4rem 0 !important;
}


.reason h3 {
	margin:20px 0 -5px;
}



.reason p,.reason p b{
	font-size:120%;
}



.reason ul li{
	background:#f2f2f2;
	padding:10px;
}


.reason ul li p{
	padding:0 15px;
	text-align:left;
}

.reason ul{
	display: grid;
  grid-template-columns: repeat(auto-fit, 390px);
  justify-content: center;
	gap:20px;
	text-align: center;
}


/*サービスの詳細*/
.detail{
	padding:20px;
	text-align:center;
	/*margin-bottom:50px;
	box-sizing: border-box;*/
}

.org{
	background:#d6d7e9;
}

.temp{
	background:#e5f1f8;
}


/*価格*/
.price {
  /* 親要素をGridコンテナに設定 */
  display: grid;
  
  /* 
    * カラム（列）を3つ定義します。
    * 1列目: 単位用 (コンテンツの幅に合わせる)
    * 2列目: 金額用 (コンテンツの幅に合わせる)
    * 3列目: 画像用 (残りの幅すべて)
    */
  grid-template-columns: auto auto 1fr;
  
  /* 
    * 行を2つ定義します。
    * 1行目: (新規追加)
    * 2行目: 価格表示用
    * 3行目: キャプション用
    */
  grid-template-rows: auto auto auto;
  
  /* グリッドアイテムを垂直方向の中央に配置 */
  align-items: center;
  
  /* 列間の隙間 */
  column-gap: 1em;
  /* 行間の隙間 */
  row-gap: 0;

  /* 以下はデザイン上の調整（任意） */
  margin:0;
  padding: 0 1.5em;
}

.price .price_title {
  grid-row: 1 / 2; /* 1行目に配置 */
  grid-column: 1 / 4; /* 1列目から3列目までをまたぐ */
  font-size:130%;
  color:#1d2185;
  text-align:left;
}

/* 「A4サイズ 1ページにつき」のテキスト */
.price .price_unit {
  /* 2行目、1列目に配置 */
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  font-size:180%;
  line-height:1.4;
  color:#1d2185;
  text-align:left;
  /* セル内で右寄せ */
  justify-self: end;
}

/* 金額 */
.price .price_amount_container {
  /* 2行目、2列目に配置 */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  padding:0;
  margin:0;
  margin-left:1.5em;
  white-space: nowrap; /* 改行を禁止 */
}

.price .price_amount {
  font-size: 400%;
  font-weight:bolder;
  color:#1d2185;
  padding:0;
  margin:0;
}

/* 注釈テキスト */
.price .price_caption {
  /* 3行目に、1列目から2列目をまたいで配置 */
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  font-size:90%;
  padding:0;
  margin:0;
  text-align:left;
}


/* 画像 */
.price img {
  /* 2行目から3行目をまたいで、3列目に配置 */
  grid-row: 2 / 4;
  grid-column: 3 / 4;
  /* 画像をセル内で右端に配置 */
  justify-self: end;
}









/*ご用意いただくもの*/

.prepare,.prepare *{
	margin:0;


}

.prepare{
	padding:10px;
	margin-top:20px;
	box-sizing: border-box;
}

.prepare,.prepare > *,.prepare div{
	background:#fff;
	display:flex;
	text-align:left;
	gap:25px;

}

.prepare h4{
	font-size:17px;
	white-space: nowrap;
}

.prepare h5{
	font-weight: 700;
	border-bottom:1px solid;
	padding:5px;
	margin-bottom:10px;
}

.prepare ul > li{
	flex:1;
}



/*メニュー*/

/*(もっと見る)*/
.cp_box1,.cp_box2,.cp_box3,.cp_box4,.cp_box5 {
  position: relative;
	padding-top:30px;
}
.cp_box1 input,.cp_box2 input,.cp_box3 input,.cp_box4 input,.cp_box5 input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label,.cp_box2 label,.cp_box3 label,.cp_box4 label,.cp_box5 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 50px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 0%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label,.cp_box2 input:checked + label,.cp_box3 input:checked + label,.cp_box4 input:checked + label,.cp_box5 input:checked + label {
  background: inherit;
}
/*.cp_box1 input:checked + label,.cp_box2 input:checked + label,.cp_box3 input:checked + label,.cp_box4 input:checked + label,.cp_box5 input:checked + label {
   display: none ; 閉じるボタンを消す場合コメントアウトを外す 
}*/
.cp_box1 .cp_container,.cp_box2 .cp_container,.cp_box3 .cp_container,.cp_box4 .cp_container,.cp_box5 .cp_container {
  overflow: hidden;
  height: 0px; /* 開く前に見えている部分の高さ */
  transition: all 0.2s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before,
.cp_box2 label:after,
.cp_box2 label::before,
.cp_box3 label:after,
.cp_box3 label::before,
.cp_box4 label:after,
.cp_box4 label::before,
.cp_box5 label:after,
.cp_box5 label::before{
  content: '';
  position: absolute;
  line-height: 2.5rem;
}
.cp_box1 label:after,.cp_box2 label:after,.cp_box3 label:after,.cp_box4 label:after,.cp_box5 label:after {
  z-index: 2;
  bottom: 20px;
  width: 13em;
  content: '実例 / 詳細をみる';
  color: #2e3192;
	border:1px solid #2e3192;
  /*background: #a1a1a1;*/
  border-radius: 20px;
}
.cp_box1 label::before,.cp_box2 label::before,.cp_box3 label::before,.cp_box4 label::before,.cp_box5 label::before {
  position: absolute;
  bottom: 38px;
  left: calc(50% - 5em);
  z-index: 3;
  width: 7px;
  height: 5px;
  background: #2e3192;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after,.cp_box2 input:checked + label:after,.cp_box3 input:checked + label:after,.cp_box4 input:checked + label:after,.cp_box5 input:checked + label:after {
  content: '閉じる';
}
.cp_box1 input:checked + label:before,.cp_box2 input:checked + label:before,.cp_box3 input:checked + label:before,.cp_box4 input:checked + label:before,.cp_box5 input:checked + label:before {
  left: calc(50% - 5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container,.cp_box2 input:checked ~ .cp_container,.cp_box3 input:checked ~ .cp_container,.cp_box4 input:checked ~ .cp_container,.cp_box5 input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.2s;
}


.menu{
	/*padding-bottom:3rem;*/
	position:relative;
}


/*.menu section{
	margin:0 20px !important;
}
*/

.menu h2{
	margin-bottom:20px;
}

.menu h3{
	padding:10px 20px 0;
	white-space: nowrap;
	color:#2e3192;
	background:#fff;
	border:1px solid;
	font-weight:600;
}

.menu h3 + p{
	font-size:120%;
	margin:20px 20px 40px;
}

/*メニュー　無料マーク*/

.ttl-ribon {
    position: relative;
}

.ttl-ribon i {
    position: absolute;
    top: -10px;
    right: 15px;
    width: 50px;
    height: 35px;
    line-height: 35px;
    background-color: #820002;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.ttl-ribon i::before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0px;
    height: 0px;
    border: none;
    border-bottom: 10px solid #000;
    border-right: 7px solid transparent;
    content: '';
}

.ttl-ribon i::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 15px 25px 0px 25px;
    border-color: #820002 transparent;
    content: '';
}





/*ご依頼から納品までの流れ*/

.flow h4{
	font-weight:900;
	color:#2e3192;
}



.flow_design {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow_design > ul {
  padding-left: 0;
}

.flow_design > ul > li {
  list-style-type: none;
  position: relative;
  padding-left: 100px;
}

.flow_design > ul > li:not(:last-child) {
  padding-bottom: 10px;
}

.flow_design > ul > li .icon::before {
  position: absolute;
  left: 0
}

.flow_design > ul > li:nth-child(1) .icon::before {
  content: url("../images/service02/icon_flow01.png");
}

.flow_design > ul > li:nth-child(2) .icon::before {
  content: url("../images/service02/icon_flow02.png");
}

.flow_design > ul > li:nth-child(3) .icon::before {
  content: url("../images/service02/icon_flow03.png");
}

.flow_design > ul > li:nth-child(4) .icon::before {
  content: url("../images/service02/icon_flow04.png");
}


/*ライン*/
.flow_design > ul > li:not(:last-child)::before {
  content: '';
  /*background: #c3c3c3;
  width: 4px;*/
  height: 100%;
border-left:dotted 2px #000;
  position: absolute;
  top: calc(50% - -30px);
  left: 42px;
 transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.flow_design > ul > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color:#2e3192;
}

.flow_design > ul dt span{
	font-size:75%;
	color:#000;
}

.flow_design > ul > li dl dd {
  margin-left: 0;
}


.flow_design > ul > li dl dd b{
  color:red;
	font-weight:normal;
}



/*よくある質問*/

.qa{
	position:relative;
}

.qa h2 + p{
	font-size:120%;
	margin:20px;
}

.qa details:not(:last-child) {
    max-width: 100%;
    margin-bottom: 5px;
    /*border-bottom: 2px dotted #2e3192;*/
}

.qa summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 5em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
	  background:#e5f1f8;
}

.qa summary::before,
.qa details p::before {
    position: absolute;
    left: 1.5em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa summary::before {
	display:inline-block;
	padding:0 10px;
	border-radius:50%;
	background:#0071bc;
    color: #fff;
    content: "Q";
	font-size:1.2rem;
	position:absolute;
	left:1rem;

}

.qa summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    content: '';
    transition: transform .5s;
}

.qa details[open] summary::after {
    transform: rotate(225deg);
}

.qa details p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 3em 1.5em 5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa details[open] p {
    transform: none;
    opacity: 1;
}

.qa details p::before {
	display:inline-block;
	padding:5px 10px;
	border-radius:50%;
	background:#1d2185;
    color: #fff;
    line-height: 1.2;
    content: "A";
	font-size:1.2rem;
	position:absolute;
	left:1rem;
}













label{
	cursor:pointer;
}

label h3{
	padding:0;
	margin:0;
	font-size:170%;
}

.acd-check{
    display: none;
}
.acd-label{
    border:3px solid #0a6e3e;
    color: #0a6e3e;
	background:#fff;
    display: block;
    padding: 5px 40px 0 10px;
    position: relative;
	box-sizing: border-box;
}
.acd-label:after{
    background: #2bac38;
	color:#fff;
    box-sizing: border-box;
    content: '▼';
	font-size:1rem;
    display: block;
    height: 44px;
    padding: 10px 15px;
    position: absolute;
    right: 0;
    top: 0;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility:hidden;
	background:#fff;
	margin-bottom: 10px;
}
.acd-check:checked + .acd-label:after{
    content: '▲';
	font-size:1rem;
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 20px;
    visibility: visible;
	border:1px solid #185138;
	border-top:none;
}

.acd-content > p{
	font-size:0.9rem;
	padding-left: 70px;
  position: relative;

}

.acd-content > p::before {
	content:'';
	background-image: url("../images/earth_hand.gif");
	background-size:cover;
	position: absolute;
	width:60px;
	height:60px;
	top: 0;
	left: 0;
}

.acd-content::after{
	content:'※掲載されている日数は目安です。';
	font-size:85%;
	margin-left:50px;
}







/* Swiper.js用のスタイル調整 */
.swiper {
    width: 100%; /* コンテナの幅を親要素に合わせる */
    position: relative; /* ページネーションと矢印の配置の基準にする */
    /* 下部にドット(高さ約30px)を配置するためのスペースを確保します */
    /* これがないと、ドットが画像の下に隠れたり、枠外にはみ出したりします */
    padding-bottom: 40px;
}
.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
/* ページネーション（ドット）の位置をコンテナ下部に固定 */
.swiper-pagination {
    bottom: 10px !important; /* コンテナ下部からの位置を固定 */
}
/* ナビゲーション（矢印）の色の調整 */
.swiper-button-next,
.swiper-button-prev {
    color: #2e3192; /* サイトのテーマカラーに合わせる */
}







/* お問合わせ */
.contact{
	text-align:center;
	background:#fff;
}








/* --- レスポンシブ対応 (768px以下のスクリーン幅) --- */
@media screen and (max-width: 768px) {
  /* --- 全体的な調整 --- */
  .main-content-area section,
  .catalog {
      padding-left: 15px;
      padding-right: 15px;
  }

  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }
  .first p { font-size: 0.9rem; line-height: 1.8; }

  /* --- トップ画像とフッターのコンタクト画像 --- */
  .catalog .top img,
  .contact img {
      max-width: 100%;
      height: auto;
  }

  /* --- 選ばれる理由 --- */
  .reason ul {
      /* PCでflexboxが使われていることを想定 */
      flex-direction: column;
      gap: 30px;
  }
  .reason ul li {
      width: 100%;
  }

  /* --- カタログ制作メニュー --- */
  .menu .cp_container .detail {
      /* PCでflexboxが使われていることを想定 */
      flex-direction: column;
      align-items: center;
      gap: 20px;
  }
  .menu .cp_container .detail > img {
      max-width: 100%;
      height: auto;
  }
  .menu .prepare ul {
      flex-direction: column;
      gap: 20px;
  }

  /* --- ご用意いただくもの --- */
  .prepare {
      flex-direction: column;
      gap: 20px;
  }

  .prepare h4 {
    white-space: normal; /* nowrapを解除してテキストの折り返しを許可 */
  }
  

  .prepare h4 br {
    display:none;
  }

  /* 価格 */
  .price {
      /* Gridレイアウトを解除し、通常のブロック要素の振る舞いに戻す */
      display: block;
  }

  /* Gridレイアウトで指定した配置をリセット */
  .price .price_title,
  .price .price_unit,
  .price .price_amount_container,
  .price .price_caption,
  .price img {
      grid-row: auto;
      grid-column: auto;
      justify-self: auto;
  }

  /* 単位と金額をタテに並べる */
  .price .price_unit,
  .price .price_amount_container {
    display: block;
  }

  .price .price_title {
    text-align: center; /* テキストを中央揃えにする */
  }

  .price .price_unit {
    text-align: center; /* テキストを中央揃えにする */
  }

  /* スマホ表示の時だけ、price_unit内のbrタグを非表示にして改行をなくす */
  .price .price_unit br {
    display: none;
  }

  .price .price_amount_container {
      margin-left: 0; /* PC用のマージンをリセット */
  }

  .price .price_caption {
      /* margin-top: 0.5em; */
      text-align: center;
  }

  .price img {
      display: none;
  }


  /* --- 納品までの流れ --- */
  /* 注: このセクションはPC用のスタイルが複雑な場合、表示が崩れる可能性があります */
  .flow .flow_design ul { flex-direction: column; gap: 30px; }
  .flow .flow_design li { width: 100%; }
  .flow .flow_design li::after { display: none; /* フローの矢印を非表示にする */ }
}