@charset "utf-8";
/* CSS Document */

/*おさらい
（コンマなし）→タグ
.(コンマあり)→クラス
＃→ID */

/*共通設定---------*/
html{font-size: 62.5%;}/*1em=16pxにする*/

body{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
font-size: 1.6em;/*追加*/
}


/*各フォントサイズ*/
header{font-size: 1.7em;}


main{font-size: 1.7em;}/*記事とかのフォントサイズ*/
/*おそらくテンプレ(スマホの文字)*/
@media screen and (max-width: 1000px) {
main{font-size: 1.8em;}}


footer{font-size: 1.7em;}
@media screen and (max-width: 800px){
footer{font-size: 1.7em;}}/*px→em*/

.select-button-wrap{font-size: 1.7em;}
.grid-content{font-size: 1.7em;}

/*--------------旧設定
html{font-size: 62.5%;}

@media screen and (max-width: 1100px) {
footer{font-size: 1.8vmax;}}

@media screen and (max-width: 800px){
main{font-size: 1.5em;}}/*px→em(これは元々記事のCSSの引用)
--------------*/
/*----------------------------*/



/*IE対策にいろいろしてみる。*/
@media all and (-ms-high-contrast: none) {

.header01{
padding: 11%;
background-image: url("../image/heder-img00.jpg")!important;
left: auto!important;} /**/
.link-icon01 img{width: 7%;}
main{max-width: 1000px;
margin-left: auto;
margin-right: auto;}
.item01{margin-top: 1.5em!important;}
.item01 p{overflow: hidden;
height: 3.5em;}/*アイテムの文字の空白をそろえた*/
.select-button-wrap{visibility:hidden;/*セレクトボタンをオフ（非表示）に*/
height: 0;}/*height:0;にしないとスペースができる*/

}

/*----------------------------*/

/*--各ページレイアウト設定------*/

html, body {
  height: 100%;
  margin: 0;}

.page-layout-wrapper-0 {
  min-height: 100dvh; /* ←画面全体の高さを確保 旧100vh*/
  display: flex;
  flex-direction: column;}

main {
  flex: 1; /* ←mainが余白を埋めてくれる */}

/*----------------------------*/

main{
width: 80%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;}

/*mainレスポンシブ-------------*/

@media screen and (max-width:1000px){
main{
width: 95%;
margin-left: auto;
margin-right: auto;
}}

/*----------------------------*/

/* 全部のIMGおすすめ小ワザ（保険的に） */
img {
  max-width: 100%;/* 親要素からはみ出さないようにする（飛び出し防止） */
  height: auto;/* 縦横比キープ */
}
/* あったらいいかも？*/
/* display: block;/* inline要素の余白を消して整える */


/*ヘッダー---------------------*/
.header-02{
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  padding: 0.5rem;

h1 {
  font-size: 3.7rem;
  margin-top: 3rem;
  margin-bottom: 0.5rem;}

p {
  color: #aaa;
  font-size: 0.5em;
  margin-bottom: 1rem;}

a{text-decoration: none; /* 下線を消す */
  color: inherit;       /* 親要素の色を継承 */}
  
}

@media (max-width:1000px){
.header-02 h1 {
font-size: 4.2rem;;}
.header01 p {font-size: 2.1rem;}
}

/*外部リンクアイコンナビゲーション*/
.header-nav01 {
  display: flex;
  align-items: center;
  background: #111;
  border: 1px solid #d3d3d35e;
  outline: solid 1px #000;    /* 外側の線になる一本線の枠線をひく*/
	outline-offset: 1px;        /* 外側の線と内側の線の空き具合を調整*/
	margin: 2px;            	/* 外側の線を広げた分、要素の大きさを調整する*/
  border-radius: 12px;
  box-shadow: 0 0 12px #fff;
  padding: 10px 20px;
  gap: 20px;
  max-width: fit-content;
  margin: 40px auto;
}

.header-nav-item01 {
  display: flex;
  align-items: center;/* 縦中央揃え（交差軸） */
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px #fff;
  transition: transform 0.2s, filter 0.2s;

  width: 7.5em;/* 同じ幅に固定 */
  justify-content: center;/*主軸方向に中央揃え*/
  padding: 1px;
}

.header-nav-item01:hover {
  transform: scale(1.05);/*これは要素の拡大・縮小を行うプロパティ1.05倍*/
  filter: brightness(1.2);/*これは明るさの調整を行うフィルター効果1.2倍*/
}

.header-nav-item01 img {
  height: 24px;/*height: 24px にして縦横比を保ちます。*/
  width: auto;
  vertical-align: middle;
}

/*.divider はアイテムの間の縦線。*/
.divider-01 {
  height: 32px;
  width: 1px;
  background: #fff;
}

/*--------------------------------------------*/


/*グリッドのところ-----------------------------*/

.grid-content{
display: grid;
margin: 1.2em auto;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
max-width: 1100px; 
gap:1.8rem;/*--旧07.5em--*/

/*grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;*/
}


.item01{
border: 1px solid rgba(255, 255, 255, 0.1);
/*background-size: auto;*/
/*background-image: url("image/test01.jpg");
background-size: auto;*/
}

/*細かい調整*/
.item01,.item01 img{
border-radius: 10px;/*角丸く*/
box-shadow: 0 4px 8px rgb(0, 0, 0);/*ボックスシャドウ*/
}

.item01 img{
width: 100%;
height: auto;
}

.item01 p{
font-size: 2rem;/*仮　消してもいい*/
font-weight: 550;/*太字*/
line-height: 1.35em;
overflow: hidden;
height: 4.1em;
}

.item01 a{
color:#000000;
text-decoration: none;
}

@media (max-width:1000px){
.grid-content{
grid-template-columns:repeat(2,1fr);
/*grid-auto-columns: auto;*/
gap: 2.6rem;
padding:0;
line-height:inherit;/*親要素に指定された値を継承*/
}

.item01 p{font-size: 2.3rem;}
.item01{padding: 0;}
}


/*記事[タイトルテンプレ] divに<h1>に文章*/
.article-title{background-color: #808080;}
.article-title-text{
max-width: 1000px;
width: 98%;
padding: 0.75em;
margin-right: auto;
margin-left: auto;

font-weight: 600;
font-size: 1.3em;
background-color: #808080;
margin-bottom: 0.5em;}

.article-title-text h1{font-size: 1.1em;}

/*旧.article-title-text h1{font-size: 2vmax;}*/



/*-----------------------------*/


/*過去ログボタン*/
.kakorogu-button a{
cursor: pointer;
}

.kakorogu-button img{
max-width: 100%;
display: block;
margin:auto;
}

.kakorogu-button-kari{
max-width: 100%;
display: block;
margin:2em auto -2em auto;
}


/*フッターたち------------------*/

footer img{
  max-width: 100%;
  height: auto;/*  縦横比を保ったまま縮小*/
  margin: 1em auto;
}

.footer-01 {
  color: #ccc;
  padding: 2rem 1rem;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

.footer-01 a {
  color: #ccc;
  text-decoration: none;
  margin: 0 0.3rem;
  transition: color 0.3s;
}

.footer-01 a:hover {
  color: #fff;
}

.footer-top {
  padding-bottom: 1rem;
}

.footer-brand{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 0 8px #ffffff;
  margin-bottom: 1rem;
}

.footer-brand img{
  width: 5rem;
  height: 5rem; 
}

.site-title {
  color: #fff;
  margin: 0 0.5rem;
  padding: 1.3em 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 4.3rem;
}

.footer-01 .site-title-a { color: #fff; }
/* .footer-01 ← 特別ルール（この a にだけ）
[おさらい]
カンマ（,）を使う場合 → 複数に同じルール
スペースを使う場合 → 階層を指定して対象を絞る */

/* メインメニュー（Twitter, YouTubeなど） */
.footer-nav-main {
  max-width: 100%;
  display: flex;
  justify-content: center;
  font-size: 0.8em;
  font-weight: bold;
  gap: 0em;
  padding: 0 0;
  flex-wrap: nowrap;
}

.footer-nav-main a{
  display: flex;
  align-items: center;    /* ← 中央揃え（任意） */
  white-space: nowrap;
  gap: 0.2em;/* ← 画像とテキストの間にスペース */
  padding: 2rem 0.5em;
  margin: 0 0.3em;
}


.footer-nav-main img {
  height: 1.1em;/*height:を固定にして縦横比を保ちます。*/
  width: auto;
  vertical-align: middle;
}

/* サブメニュー（お問い合わせ,ほしいものリスト等） */
.footer-nav-sub {
  font-size: 0.8em;
  line-height: 1.2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 2rem;
  letter-spacing: 0.03em;/*文字と文字の間隔*/
}

.footer-nav-sub a {
  font-weight: bold;
  padding: 0.6em 0.5em;
  white-space: nowrap;
}

.footer-nav-sub-line{
  height: 1.5em;
  width: 1px;
  padding: 1.7rem 1px;
  background-color: #404040;
}

/* フリースペース */
.footer-middle {
  padding: 1.5rem 1rem;
  min-height: 600px; /* Google広告の高さに対応（推奨） */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #eee;
  text-align: center;
}

/* フリースペース(ホーム画面) */
.footer-middle-index {
  background-image: url(https://okadust.net/image/footer-imgage/ChatGPT-Image-20250602-11-31-56.jpg);
  background-size: auto 100%;  /* 高さを合わせる・横幅は自動 */
  background-repeat: repeat;/*繰り返し*/
  background-position: top center; /*要素の上中央に配置*/

  padding: 1.5rem 1rem;
  min-height: 600px; /* Google広告の高さに対応（推奨） */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #eee;
  text-align: center;
}

/* コピーライト部分 */
.footer-bottom {
  font-size: 1rem;
  color: #ffffff;
  padding-top: 1rem;
}

/* 区切り線 */
.border-line-01 {
  width: 80%;
  height: 1px;
  background-color: #404040;
  margin: 0 auto; 
}

/*-----------------------------*/



/*Google広告設定*/

.google-ad-00{
/*background: #999999;*/ /* testで表示チェックするとき用 */
margin-left: auto;
margin-right: auto;
margin-bottom: 2.6em;
padding-bottom: 2em;
width: 80%;
max-width: 1200px;
min-height: 200px; /* 最低限の高さを確保 */}
/*旧設定
width: 80%;
max-width: 1200px;*/

.google-ad-01{/* class付けして設定しないと広告消える？test */
margin-left: auto;
margin-right: auto;
margin-top: 2em;
margin-bottom: 2em;
padding: 0.5em;
width: 80%;
max-width: 1300px;
min-height: 200px; /* 最低限の高さを確保 */}


/*Google広告と記事の境界線*/
.google-ad-00-line {
  display: flex;
  align-items: center;
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  margin: 30px 0 10px;
}

.google-ad-00-line::before,
.google-ad-00-line::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #888;
  margin: 0 10px;
}

.google-ad-00-line span {
  background-color: #333; /* 背景色、好みに合わせて */
  color: #fff;            /* 文字色 */
  padding: 1px 20px;/* 楕円の大きさ指定 */
  border-radius: 9999px;  /* 楕円にするための指定 */
  font-size: 1.7rem; /* 文字の大きさ */
  font-weight: bold;/* 文字の太く */
}


/*Google広告設定(記事の初めの広告GBA風)test*/

.ad-content-gba{
  width: 100%;
  height: 150px; /* ← この高さがポイント！ */
  max-height: 200px;
  overflow: hidden;
  position: relative;
  background-color: #000;
  border: 4px solid #888;
  box-sizing: border-box;
}

.ad-container {
  width: 100%;
  max-width: 320px; /* 好みで変えてOK */
  aspect-ratio: 6 / 1; /* 比率を維持して表示 */
  max-height: 160px;   /* 縦長広告を制限 */
  overflow: hidden;
  margin: 0 auto;
}

.ad-container ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.gba {
  overflow: visible;
  margin: 2em auto;
  background: #555;
  border-radius: 7px;
  padding: 0px;
  width: 340px;
  border: 1px solid #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
}

.screen-frame {
  height: 220px;
  background: #555;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* 共通の丸 */
.corner-dot {
  position: absolute;
  width: 16px;   /* サイズ調整可 */
  height: 16px;
  background-color: #343434;  /* お好みで */
  border-radius: 50%;
  z-index: 10;
}

/* 四隅の配置 */
.top-left { top:7px; left: 7px; }
.top-right { top: 7px; right: 7px; }
.bottom-left { bottom: 7px; left: 7px; }
.bottom-right { bottom: 7px; right: 7px; }

.screen-inner {
  background: #555; /* 中身と同じ背景色で上書き */
  z-index: 1;
  position: relative;
  padding: 25px;
  box-sizing: border-box;
}

.ad-content-gba {
  height: 170px;
  display: flex;
  justify-content: center; /* 横方向の中央 */
  align-items: center;     /* 縦方向の中央 */
  position: relative;
  z-index: 2;
  color: white;
  font-size: 14px;
  text-align: center;
  border: 11px solid #000000;
  padding: 16px;
  background-color: #343434;
}

.hinzi{
  width: 100%;
  height: 25px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #444 linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
}
.hinzi h2{color: #ffffff;}

.controls {
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.dpad {
  position: relative;
  width: 75px;   /* 中心(25px) + 左右(25pxずつ) */
  height: 75px;
  margin: 10px;
}

.dpad div {
  position: absolute;
  background: #888;
  border-radius: 3px;
}

.dpad .up    { top: 0; left: 25px; width: 25px; height: 25px; }
.dpad .down  { bottom: 0; left: 25px; width: 25px; height: 25px; }
.dpad .left  { left: 0; top: 25px; width: 25px; height: 25px; }
.dpad .right { right: 0; top: 25px; width: 25px; height: 25px; }
.dpad .center { left: 25px; top: 25px; width: 25px; height: 25px; background: #888; }

.buttons {
  display: flex;
  gap: 10px;
  margin: 10px;
}

.btn.ab {
  width: 30px;
  height: 30px;
  background: #888;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.start-select {
  width: 40px;
  height: 40px;
  margin: 10px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding-top: 75px;
}

.btn.small {
  width: 60px;
  height: 16px;
  background: #888;
  color: white;
  font-size: 10px;
  border-radius: 6px;
  text-align: center;
  line-height: 16px;
  box-shadow: inset -1px -1px 0 #777, inset 1px 1px 0 #333;
}

.base01 {
  width: 100%; /* 本体よりやや小さく */
  height: 20px;
  background-color: #333; /* 影っぽい色 */
  margin-top: 15px; /* 上に少しかぶせて自然に接続 */
  z-index: 0;
  border-radius: 0 0 6px 6px;
}

@media (max-width: 400px) {
  .gba {
    width: 90%;
    padding: 12px;
  }
  .screen-inner {
    min-height: 120px;
    padding: 12px;
  }
  .btn.ab {
    width: 36px;
    height: 36px;
  }
}

/*----------------------------*/


/*Twitter---------------------*/

.twitter-share img{
width: 2.5em;}

/*Twitterシェア*/
.twitter-share-btn img{
vertical-align:-60%;
width: 2.5em;}

.twitter-share-btn{
text-decoration: none;
padding: 1em 1em 1em 0;
background-color:#1da1f2;
color: #FFFFFF;
border-radius: 10px;}

/*----------------------------*/

/*プライバシーポリシー*/
.privacy-policy-div{font-size: 1.7em;}
.privacy-policy-div h3{margin-top: 1.7em;}


/*お問い合わせ設定*/
.main-oto{
display: flex;
justify-content: flex-end;
}
.oto-div{
padding: 0 1% 1% 1%;
margin: 0 auto 3em auto;
font-size: 2vmax;
}

.oto-div a img{
width: 5em;
}
.oto-footer{
width: 100%;
height: 5em;
min-height: 50vh;
}
.oto-footer p{
color: #8C8C8C;
}
.oto-aside{
right: 0;
min-height: 100vh;
}

.oto-h2{font-size: 2vmax; text-align: center;}
iframe{
width:100%; 
height:1000px;
margin: 0 auto 0 auto;
}

/*------------------------------*/

/*カラー設定*/
body{background-color: #CCCCCC;}
.grid-content{background-color: #CCCCCC;}
.item01{background-color:#999999;}
/*ヘッダーの背景*/
.header-02{ background-color: #1D1D1D;}
/*フッターの背景*/
footer { background-color: #292929;}
/*ホーム画面記事の背景*/
body.index-body,.grid-content{background-color: #1D1D1D !important;}

/*-----------------------------*/