/*
 * tablet.css — タブレット専用（600px〜1024px）
 * 【修正】ドロワーメニュー展開時に画面が縮小し、右側に空白ができる問題を解消。
 */

/* ── body / コンテナ ────────────────────────────────────── */

body {
    font-size: 14px;
    height: auto;
    margin: 0 auto;
    min-height: 100vh;
    overflow-y: visible; 
    /* 修正：overflow-x: hidden は、子要素の fixed や absolute の計算を狂わせることがあります */
    overflow-x: clip; 
    width: 100%; /* auto から 100% に固定 */
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.container {
    margin: 10px auto;
    width: 100%; /* 100% にして確実に埋める */
}


/* ── フロントページ（タブレット） ───────────────────────── */

/* 1. ホームのみ画面全体をFlexコンテナ化 */
body.home {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100dvh; /* iPadのアドレスバー対応 */
    overflow-y: visible;
    padding: 0;
    width: 100%;
    /* 修正：Flexアイテムが予期せぬ縮小を起こさないように保護 */
    flex-shrink: 0;
}

/* 2. メインコンテンツを垂直中央に配置 */
.home #main.container {
    padding: 0;
    width: 100%;
    flex: 1 0 auto; /* 縮まないように 0 を追加 */
    display: flex;
    align-items: center; /* 垂直方向中央 */
}

/* 3. 配置の最適化 */
.home .front-content-wrapper {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0;
    width: 100%;
}

.home .mogami {
    display: block;
    height: auto;
    max-width: 250px;
    padding-left: 50px;
}

.home .language-selector {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-right: 50px;
}

/* 4. フッターの配置調整 */
html body.home #footer.container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    margin: 0;
    padding: 20px 0 40px 0;
    position: relative;
    width: 100%;
    z-index: 9999;
}

.home .col-center { justify-content: center; }
.home .col-right { justify-content: flex-end; padding-right: 50px; }

html body.home .col-right a.twitter {
    color: #515151;
    font-family: 'Dosis', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
    padding: 0;
    text-decoration: underline;
    white-space: nowrap;
}


/* ── header（タブレット） ───────────────────────────────── */

.front-content {
    background: white;
    height: auto;
    margin: 5px 50px;
    padding: 5px 50px;
    width: auto;
}

h1.title {
    color: #515151;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 4px;
    word-spacing: 2px;
}

h1.title a:hover,
a:focus { color: #515151; }

span.logo-text { padding-left: 50px; }

div.title2 {
    background-size: contain;
    display: block;
    margin: 50px 0 50px 30px;
}

p.language,
ul.language {
    color: #515151;
    display: flex;
    float: right;
    font-family: 'Dosis', sans-serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 6px;
    line-height: 1;
    margin-top: 2.5px;
    text-align: right;
}

#header {
    height: 150px;
    margin: 0;
    position: relative;
    width: 100%; /* auto から変更 */
}

h3 {
    color: #515151;
    font-family: 'Dosis', sans-serif;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-block-end: 0em;
    margin-block-start: 0em;
}

.g_translation {
    background-image: linear-gradient(-90deg, rgb(238,238,238) 0%, rgb(238,238,238) 94%, rgb(221,221,221) 100%);
    font-family: 'Dosis', sans-serif;
    font-weight: 550;
    height: 50px;
    letter-spacing: 2px;
    padding: 5px auto;
    position: relative;
    text-decoration: none;
    width: auto;
    word-spacing: 2px;
}

.clearText {
    display: none;
    overflow: hidden;
    white-space: nowrap;
}

.drawer-menu {
    display: block;
    font-family: 'Dosis', sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 4px;
    text-decoration: none;
    word-spacing: 5px;
}


/* ── posts（タブレット） ────────────────────────────────── */

#posts { height: auto; width: 100%; }

.post {
    display: inline;
    margin-bottom: 30px;
}

html body .post-header {
    border-left: none;
    display: block;
    margin: 0 auto;
    width: 95%;
}

html body .post-content {
    background: white;
    border-left: none;
    contain: none; 
    display: block;
    height: auto;
    margin: 0 auto;
    overflow: visible; 
    padding: 0 3px 0 0;
    width: 92%;
}

html body .sketchfab-embed-wrapper { margin: 0 auto 30px auto; }

html body div.p3din {
    height: 600px;
    margin: 0 auto 30px auto;
    min-height: 600px;
}


/* ── 写真・figure（タブレット） ─────────────────────────── */

html body figure {
    display: flex;
    margin: 0 auto;
}

html body figure.wp-block-image.is-resized {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 92%;
}

html body div.thumbnail img,
html body .link01 img {
    background: rgb(236, 236, 236);
    height: 100%;
    max-width: 100%;
    width: 100%;
}

html body .thumbnail { padding-bottom: 5px; }

html body .thumbnail3 { width: 98%; }

html body div figure.thumbnail2 {
    background: white;
    box-shadow: inset 0 0 3px 3px #DDD;
    max-width: initial;
    width: 100%;
}

html body .wp-block-image .alignright,
html body .wp-block-image .aligncenter,
html body .wp-block-image .alignleft {
    box-shadow: inset 0 0 3px 3px #DDD;
    display: block;
    float: none;
    height: auto;
    width: 92%;
}

html body .wp-block-column { margin: 0 auto; }

html body .wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
    max-width: 100%;
    padding-bottom: 45px;
}


/* ── howtomake（タブレット） ────────────────────────────── */

h5.Request-button01 {
    display: inline-block;
    font-size: 14px;
    height: 30px;
    width: 400px;
}

html body figure.Request-icon01 { float: right; }

html body figure.howtomake {
    float: left;
    font-size: 16px;
    margin-left: 10px;
    text-align: center;
    width: auto;
}

html body figure.howtomake4 {
    float: left;
    font-size: 16px;
    padding: 25% 0 0 5px;
}

html body figure.howtomake5 {
    font-size: 16px;
    padding: 8% 0 0 5px;
    width: 100%;
}

html body figure.howtomake9 {
    float: left;
    width: 70%;
}

html body .wp-block-image .howtomake5 { padding: 24px 0 0 0; }

html body .wp-block-image .howtomake6 {
    height: 100%;
    margin: 0;
    width: 100%;
}

html body .wp-block-column .howtomake5 {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: normal;
}

html body .wp-block-column .howtomake7 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

html body .howtomake_box {
    align-items: center;
    background: none;
    display: flex;
    height: auto;
    min-height: 225px;
    justify-content: flex-start;
    margin: 10px 0 20px 0;
    overflow: visible;
}

html body .howtomake_box .wp-block-column {
    display: block;
    flex-direction: column;
    justify-content: center;
    margin: 0 10px;
}

html body .howtomake_box2 {
    margin: 10px 0 20px 0;
    padding: 15px 2px;
}


/* ── 文章（タブレット） ─────────────────────────────────── */

html body .entry-header .entry-title3,
html body .entry-header .entry-title4,
html body h2,
html body .column1st,
html body .column2st,
html body .entry-header ul,
html body h4,
html body h5,
html body p {
    font-family: "Helvetica Neue", Arial, 游ゴシック, YuGothic,
                  "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.entry-title {
    line-height: normal;
    padding-left: 10px;
}

.entry-title a {
    font-size: 13px;
    width: 90%;
}

.entry-header .entry-title {
    font-size: 18px;
    padding-left: 0;
    padding-top: 17px;
}

.entry-header .entry-title3 {
    font-size: 18px;
    font-weight: normal;
    padding-left: 0;
}

.entry-header .entry-title4 {
    font-size: 16px;
    font-weight: 600;
    padding-top: 0;
}

h2.entry-title2 {
    font-size: 16px;
    font-weight: 600;
}

html body h2.entry-title3 {
    font-size: 16px;
    font-weight: 600;
    margin-block-end: 0em;
    margin-block-start: 0em;
    padding-top: 20px;
}

html body h2 { font-size: 16px; }

.entry-content p {
    padding-bottom: 10px;
    padding-top: 10px;
}

.column1st .entry-content,
.column1st .entry-content2 {
    font-weight: 600;
    padding-bottom: 10px;
}

.column1st .entry-content2 { padding-left: 10px; }

html body .column1st div.entry-content2 { padding-left: 0; }

html body .column2st .entry-content,
html body .column2st .entry-content2,
html body .column2st .entry-content3 {
    font-family: "Yu Gothic";
    font-weight: 600;
    line-height: 1.4em;
    padding-bottom: 5px;
}

.column2st footer {
    font-family: "Yu Gothic";
    font-weight: normal;
}

html body .column1st,
html body .column2st {
    font-size: 14px;
    height: auto;
    list-style: none;
    margin: 0 0 0 10px;
    padding: 0 0 20px 0;
    width: 92%;
}

html body .wp-block-column section { margin: 0; }

html body .entry-header ul {
    font-size: 14px;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 10px 0 20px 0;
    width: 92%;
}

html body h4 {
    color: #3D3937;
    font-size: 18px;
    font-weight: normal;
}

h5 { font-size: 15px; }

html body p {
    color: #3D3937;
    margin: 0 auto;
    margin-block-end: 0em;
    margin-block-start: 0em;
    width: auto;
}

html body .p2 {
    display: block;
    margin: 0 auto;
    width: 97%;
}

strong { text-align: left; }

.profile {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding-bottom: 5px;
}

p.title01 { background: none; font-size: 14px; padding-bottom: 20px; padding-top: 5px; }
p.title02 { background: none; font-size: 14px; padding-top: 5px; }
p.title03 { background: none; display: inline-block; font-size: 14px; margin-left: 37%; padding-bottom: 20px; padding-top: 5px; width: 100%; }
p.title04 { background: none; font-size: 14px; padding-bottom: 20px; padding-top: 5px; position: relative; }


/* ── コンタクトフォーム（タブレット） ──────────────────── */

html body .cf7 {
    font-size: 14px;
    line-height: 0;
}

html body input#form-name,
html body input#form-mail,
html body input#form-title,
html body input.wpcf7-text,
html body textarea,
html body label.cf7-2,
html body p.contact01,
html body p.contact02,
html body p.contact03 { font-family: "Yu Gothic"; }

input#form-name,
input#form-mail,
input#form-title,
input.wpcf7-text {
    font-size: 100%;
    margin-bottom: 15px;
    width: 50%;
}

textarea {
    height: 300px;
    margin-top: 4px;
    width: 50%;
}

html body label.cf7-2 { font-size: 14px; }

html body p.contact01,
html body p.contact02,
html body p.contact03 {
    display: block;
    font-size: 14px;
    margin: 0;
    width: 50%;
}

p.contact01,
p.contact03 { line-height: 20px; }

html body p.contact01 { padding-bottom: 0; }
html body p.contact02 { font-weight: 600; padding-bottom: 2px; }
html body p.contact03 { padding-bottom: 15px; }


/* ── サイドバー（タブレット） ───────────────────────────── */

.menu {
    display: inline-block;
    font-size: 12px;
    list-style: none;
    overflow: hidden;
    padding: 0;
    width: auto;
}

.menu > li { width: auto; }

.menu a {
    border-bottom: 1px solid #EEE;
    color: #515151;
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 15px 0 15px 13px;
    text-align: left;
    text-decoration: none;
    width: 160px;
}

.menu a:visited,
.menu a:hover,
.menu a:active,
.menu a:focus { outline: none; }


/* ── 検索（タブレット） ─────────────────────────────────── */

.searchbox #customSearchForm {
    border: #CCC solid 1px;
    border-radius: 14px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4em;
    margin: 0 auto;
    text-align: center;
    text-indent: 0;
    width: 204px;
}

html body .searchbox #s {
    background: none;
    border: none;
    line-height: 18px;
    padding: 6px 0;
    text-indent: 0;
    width: 156px;
}

html body .page .custom-nav-inline,
html body .search .custom-nav-inline {
    align-items: center;
    color: #3D3937;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

html body .page .searchbox-wrapper,
html body .search .searchbox-wrapper {
    align-items: center;
    contain: layout;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

html body .page .searchbox,
html body .search .searchbox { order: 1; }

html body .page #pagination-top-links,
html body .search #pagination-top-links {
    display: flex;
    justify-content: center;
    order: 2;
    padding-left: 0;
    width: 100%;
}

html body ul.page_navi {
    justify-content: center;
    margin-bottom: 20px;
}