@charset "utf-8";

/*--  kayumi --*/

/*Font Awesome
------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*CSS（サイト全体を一括管理する為の設定）
------------------------------------------------------------------------*/
:root {

	/*余白の一括管理用。主に左右の余白に使っています。2rem＝２文字分。*/
	--pad-space: 2rem;
	
}


/*全体の設定
------------------------------------------------------------------------*/
body {
	color: #222;	/*全体の文字色*/
	margin: 0px;
	padding: 0px;
	font: 16px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";   /*文字サイズ/行間、フォントファミリー*/

}

h1,h2,h3,h4,h5,p,dl,dt,dd,form,figure{
	margin: 0px;
	padding: 0px;
}

h1 {
        font: bold 20px 'Aldrich', sans-serif;
	color: #222;
	padding: 10px 10px 0px;
	text-align: left;
	font-weight: bold;
}

h2 {
	font-weight: bold;
	color: #222;
	background: #fff;
	line-height: 1.5;
	text-align: center;
	padding: 10px 0 10px;
	font-size: 6vw;
	border-radius: 6px 6px 0 0;
}

@media screen and (min-width: 768px) {
	h2 {
		font-size: 36px;
	}
}

h3 {
	font-weight: bold;
	line-height: 1.5;
	color: #333;
    	padding: 20px 0 20px 20px;
	font-size: 5vw;
}

@media screen and (min-width: 768px) {
	h3 {
	    font-size: 24px;
	  }
}

img {
	border: none;
	max-width: 90%;
	height: auto;
	border-radius: 5px;
}


section {
	padding: 4em 0 10px; 
	margin: 0 0 20px; 
	clear: both;
}


/*コンテナー（HPを囲むブロック）
------------------------------------------------------------------------*/
#container {
	overflow-x: hidden;
	position: relative;
	animation: opa1 1s 0.4s both;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 1800px;	/*サイトの最大幅。*/
	margin: 0 auto;
	background: #eee;    /* 全体の背景色 */

}

/*header
------------------------------------------------------------------------*/
/*ヘッダーブロック*/

header {
	padding: 0rem var(--pad-space);		/*ヘッダー内の余白。上下に１文字分、左右にcss冒頭のcontent-spaceのサイズを読み込みます。*/
	background: #eee;	/*背景色*/
	color: #222;		/*文字色*/
	text-align: center;
}

header a {
	color: inherit;
	text-decoration: none;
}

	/*画面幅768px以上の追加指定*/
	@media screen and (min-width:768px) {

	header {
		display: flex;	/*中のコンテンツを横並びにする*/
		justify-content: space-between;
		align-items: center;
		gap: 2rem;	/*中のコンテンツ同士に空けるマージン的な余白。*/
	}

}/*追加指定ここまで*/


/*ロゴ（※画像の場合）*/
#logo img {
	display: block;
	margin: 10px auto;
	width: 80px;	/*ロゴの幅*/
}

/*ロゴ（※テキストの場合）*/
#logo a {
	text-decoration: none;
}

#logo {
	color: #214776;		/*文字色 headerの文字色と変えてもOK*/
	width: auto;
	font-size: 1.4rem;	/*文字サイズ。140%*/
	@media screen and (max-width:480px) {
		text-align: center;
	}
}

/*ヘッダーの右側ブロック（電話番号など）*/
#header-box {
	font-size: 0.8rem;	/*文字サイズ80%*/
}


/* ボタン部分の実装------------------------------------------*/
.menu-btn {
    position: fixed;
    top: 1px;
    right: 6px;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #214776;     /* ボタンの背景色 */
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    /* background-color: #fff; */    /* 三本線の色 */
    position: absolute;
}

/* 真ん中 */
.menu-btn span {
    background-color: white;
}

/* 上 */
.menu-btn span:before {
    background-color: white;
    bottom: 8px;
}

/* 下 */
.menu-btn span:after {
    background-color: white;
    top: 8px;
}


/* ボタンをタップで「×」マークにする。チェックボタンを隠す---------*/
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
/*　【追記】メニュー押されたらボタンの色を変える*/
#menu-btn-check:checked ~ .menu-btn {
    background-color: #eeeeee;
}
#menu-btn-check {
    display: none;
}



/*　3本線メニューの装飾　
-----------------------------------------------*/

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;	/*メニュー画面の開始位置*/
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color:rgba(255,255,255,95%);
    transition: all 0.5s;/*アニメーション設定*/
}

.menu-content ul {
    padding: 40px 10px 0;     /*ハンバーガーメニューの余白*/
}
.menu-content ul li {
    border-bottom: solid 1px #383838;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 20px;	/*メニューの文字サイズ*/
    box-sizing: border-box;
    color:#383838;
    text-decoration: none;
    padding: 50px 15px 8px 0;
    position: relative;
}
/*.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}*/

/*　タップでメニュー表示　*/
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}


/* スマホとPCで表示を変える
----------------------------------------------------------------*/
/* スマホのときだけ表示 */
/*PCで無効*/
.pc_hid {
    display: none;
}

/*スマートフォンで有効*/
@media screen and (max-width:480px) {
    .pc_hid {
        display: block;
    }
}

/* PCのときだけ表示 */
/*PCで有効*/
.smp_hid {
    display: block;
}

/*スマートフォンで無効*/
@media screen and (max-width:480px) {
    .smp_hid{
        display: none;
    }
}


/*リンク（全般）設定
------------------------------------------------------------------------*/
a {
	color: #222;	/*リンクテキストの色*/
}

a:hover {
	color:rgba(34, 34, 34, 0.5);	  /*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。*/
}




/*コンテンツ（main,footerを囲むブロック）
-----------------------------------------------------------------------*/
#contents {
	clear: left;
	padding-top: 0px;

}



/*トップ画像の配置
-----------------------------------------------------------------------*/
.top_image {
	text-align: center;
	padding: 0px; 
	margin: 0px; 
	background-color: #000;
	/*トップ画像の背景色*/		
}


/* --- スライド --- */
.top-slider {
  position: relative;
  width: 100%;
  height: 500px; /* 高さ調整 */
  overflow: hidden;  /* はみ出した画像を隠す */
  background-color: #000; /*基本の背景色 */
}



/* --- スライド画像の共通設定 --- */
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;   /* 画像を枠いっぱいに広げる */
  background-position: center;
  opacity: 0; /* 最初は透明にしておく */
  
  /* アニメーションの設定: 名前 時間 ループ 進行具合 */
  animation: zoomFade 25s infinite linear;
}

/* --- ここでスライド画像の指定 --- */
.slide-1 {
  /* 1枚目の画像 */
  background-image: url('../kayumi/staff_pc01.jpg');
  opacity: 1; 
  animation-delay: 0s; /* 1枚目はすぐスタート */
}



@media screen and (max-width: 768px) {
	.slide-1 {
	    background-image: url('../kayumi/staff_sp01.jpg');
	  }
}

.slide-2 {
  /* 2枚目の画像 */
  background-image: url('../kayumi/tennai_pc02.jpg');
  animation-delay: 5s; /* 2枚目は6秒後にスタート */
}

@media screen and (max-width: 768px) {
	.slide-2 {
	    background-image: url('../kayumi/tennai_sp02.jpg');
	  }
}
.slide-3 {
  /* 3枚目の画像 */
  background-image: url('../kayumi/cut_pc03.jpg');
  animation-delay: 10s; /* 3枚目は12秒後にスタート */
}

@media screen and (max-width: 768px) {
	.slide-3 {
	    background-image: url('../kayumi/cut_sp03.jpg');
	  }
}
.slide-4 {
  /* 4枚目の画像 */
  background-image: url('../kayumi/tennai_pc02.jpg');
  animation-delay: 15s;
}

@media screen and (max-width: 768px) {
  .slide-4 {
    background-image: url('../kayumi/tennai_sp02');
  }
}

.slide-5 {
  /* 5枚目の画像 */
  background-image: url('../kayumi/cut_pc03.jpg');
  animation-delay: 20s;
}

@media screen and (max-width: 768px) {
  .slide-5 {
    background-image: url('../kayumi/cut_sp03.jpg');
  }
}


/* --- アニメーションの動きを定義 --- */
@keyframes zoomFade {
  0% {
    opacity: 0;
    transform: scale(1.0);  /*　倍率1.0　*/
  }

  5% {
    opacity: 1;
  }

  15% {
    opacity: 1;
    transform: scale(1.1);  /*　倍率1.1　*/
  }

  25% {
    opacity: 0;  /* 重なる時間を調整20％で重なりゼロ */
  }

  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}



/*メインコンテンツ
-----------------------------------------------------------------------*/
#main {
	width: 1000px;	/* メインコンテンツ幅 */
	margin-right: auto;	/* コンテンツを中央に配置 */
	margin-left: auto;
        /*background: 
        linear-gradient(to right,rgba(33, 71, 118, 0.7), rgba(33, 71, 118, 0.7));*/
	padding-top: 0em;

}

#main800 {
	max-width: 800px;
	padding: 0.5em 15px 0em;
	margin-right: auto;	/* コンテンツを中央に配置 */
	margin-left: auto;
}

#main600 {
	max-width: 600px;
	padding: 1em 30px 4em;
	margin-right: auto;	/* コンテンツを中央に配置*/
	margin-left: auto;
}

.kakomi {
	border: 2px solid #aaa;
	border-radius: 10px;
}

/*mainコンテンツの段落タグ設定*/
#main p,
#main800 p,
#main600 p {
	padding: 0.5em 15px 1em;
}

/*ブロックを横に並べる
-----------------------------------------------------------------------*/

.container_float_left,
.container_float_right {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /*margin-bottom: 40px;  セクション間の余白（お好みで調整） */
}

/* 左から並べる（通常の並び） */
.container_float_left {
    flex-direction: row;
}

/* 右から並べる（PCの時だけ右から並べる） */
.container_float_right {
    flex-direction: row-reverse; 
}

/* 
  PCでの幅調整
  gap: 20px の場合、全体の幅(100%)から隙間(20px)を引いた残りを分配します。
*/

.block1 {
    flex: 2 1 calc(40% - 8px);  /* 3:2の比率（40%） */
    box-sizing: border-box;
    border: 0px solid #ddd;
    padding: 50px 5px 5px;  /* 上の大きなパディング(30px)を調整 */
}

.block2 {
    flex: 3 1 calc(60% - 12px); /* 3:2の比率（60%） */
    box-sizing: border-box;
    border: 0px solid #ddd;
    padding: 50px 5px 5px;
}


.block3 {
    flex: 1 1 calc(50% - 10px);  /* 1:1の比率（40%） */
    box-sizing: border-box;
    border: 0px solid #ddd;
    padding: 50px 5px 5px;  /* 上の大きなパディング(30px)を調整 */
}

.block4 {
    flex: 1 1 calc(33% - 20px);  /* 1:1:1の比率（33%） */
    box-sizing: border-box;
    border: 0px solid #ddd;
    padding: 10px 0px 5px;  /* 上の大きなパディング(30px)を調整 */
}




/* スマホ（768px以下）では縦に並べる */
@media screen and (max-width: 768px) {
    .block1, .block2, .block3, .block4 {
        flex: 1 1 100%; /* 幅100%で縦に並べる */
    }
}


/*こだわり
-----------------------------------------------------------------------*/
.concept_wrap {
   width: 100%;
   height: auto;
   margin: 0;
   background-color: #fff;
}

.concept_wrap #main {      /* こだわりのmainの背景色 */
	background-color: #fff;

}

.concept_wrap h3 {  
	text-align: center;

}




/*価格表
-----------------------------------------------------------------------*/
.price_table {
   width: 100%;
   background: 
   linear-gradient(to right,rgba(33, 71, 118, 0.8), rgba(33, 71, 118, 0.9)), 
   url('../kayumi/signpole.jpg') repeat right top ;
   width: 100%;
   height: auto;
   padding: 0;
   margin: 0;

}

.price_table #main {      /* 価格表のmainの背景色 */
	background: 
        linear-gradient(to right,rgba(33, 71, 118, 0.8), rgba(33, 71, 118, 0.7));
}


table,td {
	border: 0px solid #ffffff;
	border-collapse: collapse;
	background-color: rgba(0,0,0,0.1)
}
table {
	width: 100%;
	color:#fff;		/*表文字色*/
}
td {
	padding: 20px 20px;
	font-size: 18px; 
        vertical-align: top; position: static;

}
.setumei {
	font-size: 12px; 
	text-align: left;
}

.left-column {
        width: 65%;
	text-align: left;
}

.right-column {
        width: 35%;
	text-align: right;
}

.price_table h2 {
	color: #fff;		/*料金表文字色*/
}

.price_table h3 {
	color: #fff; 		/*メニュー文字色*/
	text-align: left;
}





/*お客様の声
-----------------------------------------------------------------------*/
.voicebox {
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 2em;
	background-color: #ffffff ;
	display: inline-block; 
	box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.4); /*横方向　下方向　ぼかし*/
	
}


/* フッター設定（コピーライトの部分）
-----------------------------------------------------------------*/
footer {
	clear: both;
	color: #fff;
        font-size: 0.8rem;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 10px;
	background-color: #222;
}

footer a {
  display: inline-block;
  margin: 0;
  padding: 10px 0;
  font-size: 0.8rem;
  text-decoration: none;
  color:#fff;
}

footer a:hover {
  text-decoration: underline;
}

.logo-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 0px;
  width: 100%;
  box-sizing: border-box;
}



/*Youtube動画の設定
-----------------------------------------------------------------*/
.video {
	position:relative;
	width:100%;
	padding-top:56.25%;
}

.video iframe {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}


/* マーカーや文字色
-----------------------------------------------------------------------*/

.marker-pink {
	background: linear-gradient(transparent 80%, #ff99cc 0%);
}

.marker-yellow {
	background: linear-gradient(transparent 75%, #ffdd00 0%);
}

.color-red {
	color: #FF5151;
}

.color-blue {
	color: #004285;
}


.color-orange {
	color: #ed7100;
}



/*その他
-----------------------------------------------------------------------*/
figcaption {
        font-size: 12px;
	color: #ccc;
}

.center {
	text-align: center;
}

.nobr {
   display: inline-block; /* 改行調整 */
}

.large {
    font-size: 1em; letter-spacing: 0.1em;
}

.big {
    font-size: 2em; letter-spacing: 0.1em;
    color: #004285;
    font-weight: bold;
}


/*リストの飾り
-----------------------------------------------------------------------*/
.custom-list {
  list-style: none; /* デフォルトのリストマーカーを無効化 */
  padding: 0;
}

.custom-list li {
  position: relative;
  padding-left: 35px;  /* 画像の幅 + 余白を確保 */
  font-weight: bold;
  line-height: 2;
  color: #ffffff;
  font-size: 24px;
  text-align: left;

}
.custom-list li::before {
  content: ""; /* 空のコンテンツ（画像を背景として使用） */
  display: inline-block;
  width: 25px;  /* 画像の幅 */
  height: 25px; /* 画像の高さ */
  background-image: url('listimage.png'); /* 画像のパスを指定 */
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0.4em;
}



/*スライダー
-----------------------------------------------------------------------*/

.slider-area{
    display:flex;
    align-items:center;
    gap:20px;
    width:100%;
    max-width:960px;
    margin:auto;
    padding-bottom:40px;
}

.slider-container{
    overflow:hidden;
    width:100%;
}

.slider-track{
    display:flex;
    transition:0.5s;
}

.card{
    min-width:240px;
    margin-right:20px;
    padding:20px 0 20px 20px;
    border-radius:20px;
    background:#fff;
    box-sizing:border-box;
}

.arrow{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
}



/*セクション切り替え clip-path
-----------------------------------------------------------------------*/



/* 上部のセクション */
.hero-section {
  position: relative;
  background-color: #ffffff; /* 上部セクションの背景色（白に近いグレー） */
  padding: 10px 20px 60px; /* 下側に少し余裕を持たせる */
  margin-top: 5px;
  text-align: left;
  
  /* clip-pathで下辺を谷型に切り抜く
    %の値を調整することで、谷の深さを自由に変更できます
  */
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
}

.hero-section h3 {
  font-size:38px;
  font-weight: bold;
  text-align: left;
}

.hero-section img {
  max-width: 100%;
}

  

/* 下部のセクション */
.resolution-section {
  background-color: #eee; /* 下部セクションの背景色（白） */
  padding: 60px 0px 10px;
  text-align: center;
  /* 上部セクションが谷型に切り抜かれているため、
    ネガティブマージンで少し引き上げて隙間を埋めます
  */
  margin-top: 0px; 
  position: relative;
}

.resolution-section img {
  max-width: 100%;
}