@charset "utf-8";

/*-------------------------------------
css初期化
--------------------------------------*/
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
	font-size: 100%;
}

div:after {
	content: "";
	display: block;
	clear: both;
}

/*-------------------------------------
タグの基本設定
--------------------------------------*/
body {
	background: #e5cdbe;
	line-height: 1.6;
	font-size: 81.25%;
	color: #414141;
}

html {
	overflow-y: scroll;
}

a {
	text-decoration: none;
	outline: none;
	color: #333333;
}

a:hover{
	text-decoration: underline;
	color: #666666;
}

a:hover img{
	opacity: 0.80;
}

/*--------------------------------------------------------------------
Container
--------------------------------------------------------------------*/
div#Container {
	width: 944px;
	padding: 10px 0;
	margin: 0 auto;
	background: #e5cdbe;
}

/*--------------------------------------------------------------------
h1
--------------------------------------------------------------------*/
h1 {
	padding: 10px 0;
	text-align: center;
}

/*--------------------------------------------------------------------
Contents
--------------------------------------------------------------------*/
div#Contents {
	width: 944px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
}

div#Contents:after {
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}

/*--------------------------------------------------------------------
Nav
--------------------------------------------------------------------*/
nav {
	width: 944px;
	margin: 0 auto;
	position: relative;
}

nav ul li {
	list-style: none;
	width: 236px;
	margin: 0 0 20px 0;
	float: left;
}

nav ul li a img:nth-child(2){
	position: absolute;
	margin-left: -236px;
  transition: opacity 1s;
}

nav ul li a:hover img:nth-child(2){
  opacity: 0;
}


/*--------------------------------------------------------------------
Main
--------------------------------------------------------------------*/
div#Main {
	width: 700px;
	margin: 0 auto;
}

div#Main h2 {
	font-size: 105%;
	font-weight: bold;
	color: #504946;
}

div#Main div#TopImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

div#Main div#PortImg {
	margin: 5px auto 0 auto;
	text-align: center;
}
div#Main {
    width: 944px; /* 700px から 944px に変更（枠いっぱいに広げる） */
    margin: 0 auto;
}

div#Main h2 {
    font-size: 105%;
    font-weight: bold;
    color: #504946;
}

div#Main div#TopImg {
    margin: 5px auto 0 auto;
    text-align: center;
}

/* ↓ これを追加！画像が枠からはみ出すのを防ぎ、綺麗に収めます */
div#Main div#TopImg img {
    max-width: 100%;
    height: auto;
    display: block;
}

div#Main p {
	color: #504946;
	margin-top: 10px;
}

div#Main table {
	width: 80%;
	margin: 10px auto 20px auto;
	border-collapse: collapse;
	border: 0 none;
}

div#Main table tr th {
	width: 25%;
	padding: 5px 10px;
	background: #865a52;
	border: 1px solid #504946;
	text-align: left;
	vertical-align: top;
	color: white;
}

div#Main table tr td {
	width: 75%;
	padding: 5px 10px;
	border: 1px solid #504946;
	text-align: left;
	vertical-align: top;
}

div#Main table tr td ul {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

div#Main table tr td ol {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

/* YouTube動画を真ん中に大きく配置する */
div#Main .movie__youtube {
    text-align: center;
    margin: 20px auto;
}

div#Main .movie__youtube iframe {
    width: 100%;          /* 親要素の幅いっぱいに拡大 */
    max-width: 800px;     /* 大きくなりすぎないように最大幅を制限（お好みで700px〜900pxに調整可能） */
    height: 450px;        /* 高さを広げて大きくする（16:9の比率） */
    display: block;
    margin: 0 auto;       /* 左右中央寄せ */
}
/*--------------------------------------------------------------------
pagetop
--------------------------------------------------------------------*/
p.pagetop {
	text-align: right;
}

/*--------------------------------------------------------------------
address
--------------------------------------------------------------------*/
address {
	clear: both;
	text-align: center;
	color: #504946;
}

/* ==========================================
   クリック切替スライダー
========================================== */
.click-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
}

/* ラジオボタンは非表示 */
.click-slider input[type="radio"] {
    display: none;
}

/* スライド画像エリア */
.slides {
    display: flex;
    width: 300%; /* 画像3枚分 */
    transition: transform 0.4s ease;
}

.slide {
    width: 33.333%;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ボタン選択による移動位置の設定 */
#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(-33.333%); }
#slide3:checked ~ .slides { transform: translateX(-66.666%); }

/* 左右矢印ボタンの共通スタイル */
.nav-btn {
    display: none;
}

.nav-btn label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.nav-btn label:hover {
    background: rgba(0, 0, 0, 0.8);
}

.nav-btn .prev { left: 15px; }
.nav-btn .next { right: 15px; }

/* 選択されているスライドに応じて矢印を表示 */
#slide1:checked ~ .controls .n1 { display: block; }
#slide2:checked ~ .controls .n2 { display: block; }
#slide3:checked ~ .controls .n3 { display: block; }

/* 下部ドットナビゲーション */
.dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#slide1:checked ~ .dots .d1,
#slide2:checked ~ .dots .d2,
#slide3:checked ~ .dots .d3 {
    background: #8b5a42; /* ブランド・コンセプトに合わせた茶色 */
}

/* ==========================================
   本をめくる仕様（Flip Book Effect）
========================================== */
.book__container {
    width: 100%;
    max-width: 600px;
    height: 420px;
    margin: 20px auto 0;
    perspective: 1200px; /* 3Dの奥行き感 */
    position: relative;
}

/* チェックボックス本体は非表示 */
.book__container input[type="checkbox"] {
    display: none;
}

.book {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left center; /* 左端を軸にして回転 */
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transform-style: preserve-3d;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.page .front, 
.page .back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* 裏返った時に非表示 */
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
}

.page .back {
    transform: rotateY(180deg);
    background: #f0f0f0;
}

.page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   A3横長画像 2枚めくり（!important なし版）
========================================== */
#Main .flyer-flip-wrapper {
    width: 100%;
    max-width: 680px;
    aspect-ratio: 1.414 / 1;
    margin: 20px auto 0;
    perspective: 1000px;
    position: relative;
    box-sizing: border-box;
}

#Main #flyer-flip-check {
    display: none;
}

#Main .flyer-flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

#Main .flyer-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#Main .flyer-page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
}

#Main .flyer-page-back {
    transform: rotateY(180deg);
}

#Main #flyer-flip-check:checked ~ .flyer-flip-card {
    transform: rotateY(180deg);
}

#Main .flyer-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-family: sans-serif;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}

#Main .flyer-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

#Main .flyer-btn-next { right: 12px; }
#Main .flyer-btn-prev { left: 12px; }

#Main .flyer-note {
    text-align: center;
    font-size: 13px;
    color: #666666;
    margin-top: 8px;
}

#Main h2 {
    text-align: center !important;
    text-align: center !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
    font-weight: bold !important;
}

#Main > p:not(.pagetop) {
    text-align: center ;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

#Main > p:not(.pagetop) {
    text-align: center !important;
    font-size: 13px !important; 
    font-weight: bold !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

/* ==========================================
   Home画面の文字サイズを全体的に少し大きく調整
========================================== */
.home-text-area {
    margin-top: 40px;
    padding: 0 40px 40px 40px;
}

/* 各セクションを囲む白いボックス */
.home-box {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 40px 35px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* サブタイトル（見出し）部分 */
.home-box h2 {
    font-size: 20px !important;         /* 少し大きく変更 */
    font-weight: bold;
    color: #ffffff !important;
    background-color: #7b5b50;
    padding: 12px 20px;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 4px;
    margin-bottom: 30px;
}

/* 本文のスタイル */
.home-box p {
    font-size: 16px !important;         /* 14pxから16pxに大きく */
    line-height: 2.0;                   /* 行間も少しゆったりさせる */
    color: #4a3b32;
    margin-bottom: 18px;
    text-align: center;
}

/* 名前部分の強調 */
.home-name {
    font-size: 19px !important;         /* 名前はさらに大きく */
    font-weight: bold;
    color: #4a3b32;
    margin-bottom: 20px;
}

/* コンセプトの引用部分 */
.home-concept-quote {
    font-weight: bold;
    font-size: 17px !important;         /* 引用部分も大きく */
    color: #4a3b32;
    margin-bottom: 20px;
}

/* スキル・ツール一覧 */
.home-skills {
    margin-top: 25px;
    font-size: 15px !important;         /* スキル一覧も見やすく */
    line-height: 1.9;
    color: #5c473c;
}
/* ==========================================
   自己紹介動画のサイズ拡大とセンター配置
========================================== */
.movie-container {
    position: relative;
    width: 100%;
    max-width: 900px;          /* 最大幅を広げて動画を大きくする（元の800pxから変更） */
    margin: 0 auto 30px auto;  /* 左右を auto にして中央に配置 ＋ 下側に余白 */
    padding-top: 56.25%;       /* 16:9のアスペクト比を保持 */
    background-color: #000000;
    border-radius: 6px;
    overflow: hidden;
}

.movie-container video,
.movie-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}