@charset "utf-8";

/*フォント名とフォントデータを指定*/   /*font-familyで指定する名前を決める、フォントが置かれているファイル位置とフォーマットを指定する*/
@font-face{font-family:"h1you"; src:url("font/ZenMaruGothic-Bold.woff") format("woff");}

html{-webkit-text-size-adjust:100%;}   /*回転時の文字調整封印*/

/*二重コロンは疑似要素でHTMLには書かれていない要素もどきをCSSで作ることができる、一つなら疑似クラス(:hoverなど)*/
body::-webkit-scrollbar{width:15px;}   /*色などスクロールバーの設定*/
body::-webkit-scrollbar-track{background:#970;}
body::-webkit-scrollbar-thumb{background:#430; border-radius:7px;}
body::-webkit-scrollbar-track:hover{background:#970;}
body::-webkit-scrollbar-thumb:hover{background:#531; border-radius:7px;}

*{box-sizing:border-box;}   /*全ての要素をborder-box(paddingを含めたwidthサイズになる)にする*/
h1,h2,h3,h4,h5,li{font-family:"h1you",sans-serif;}   /*h1〜h3を指定フォントにする、sans-serifはゴシック体フォントが無かった時の指定*/
ol,ul{list-style:none; padding-inline-start:0px;}   /*list-styleの項目の頭につく記号と空白を消す*/
ul{height:50px; display:flex; justify-content:space-between; flex-direction:row; margin:0px; background:#b49760;}
li{width:25%; line-height:50px; text-align:center; font-size:clamp(12px,calc(4vw*0.8 - 1px),24px);}
a{cursor:pointer; text-decoration:none; color:#000;}   /*リンクのマウスカーソルを変え勝手に引かれるアンダーラインを消す*/
a:hover{color:#737373;}   /*リンクマウスオーバー時の文字色*/
a header{color:#000;}   /*ヘッダー部分用リンク文字色（青くならないようにしている）*/
a header:hover{color:#000;}   /*ヘッダーリンクマウスオーバー時の文字色（基本は黒）*/
p{font-size:clamp(9.5px,calc(3vw*0.8 - 1px),16px); margin:0;}    /*pタグ文章の基本の大きさ指定*/
strong{width:100%; display:inline-block; text-align:center; font-size:clamp(13px,calc(3vw),20px);}

/*タイトル文字サイズ調整とセンター揃え、relative とtopで相対的な位置調整*/
h1{font-size:clamp(15px,calc(3vw*0.9),55px); text-align:center; position:relative; margin:0px auto;}
h2{font-size:clamp(15px,calc(3vw*0.9 - 3px),28px); margin:0px 15px; text-decoration:underline solid;}
h3{margin:0;}

/*ウィンドウ背景の設定*/  /*background-color:transparentは透明*/
body{background-image:url(haikei.webp); margin:0;}

/*サムネリンク画像フィルター*/
.slink:hover{filter:contrast(150%);}   /*リンク画像にマウスを乗せるとコントラストを上げる*/

/*@keyframesはアニメーションの名前と動きを決める*/
@keyframes chlooplink{0%{transform:translateY(-10px);} 50%{transform:translateY(0px);} 100%{transform:translateY(-10px);}}
/*animation:(名前) (動作の秒数) (動き、linearは終始同じ速度) (infiniteは繰り返し) (forwardsは終了状態で固定)*/
.chlink{width:clamp(40px,calc(80/820*100vw),100px); height:clamp(40px,calc(100/820*100vw),100px); position:sticky; top:0px; z-index:1; background:url("tophe.png") no-repeat right 10px/contain; animation:chlooplink 2s linear infinite; margin-top:40px;}   /*stickyを指定するとスクロールしてもブロックが固定されて付いてくる(動作には最低でもtopの位置を決める)、z-indexはレイヤー優先順位で数値が高い方が上にくる*/

/*チャンネルリンクの画像変更用クラスでnotlangレジスタで指定している*/
.ar_{background:url(chlink/ar_chlink.webp) no-repeat right 10px/contain;}   /*アラビア*/
.de_{background:url(chlink/de_chlink.webp) no-repeat right 10px/contain;}   /*ドイツ*/
.en_{background:url(chlink/en_chlink.webp) no-repeat right 10px/contain;}   /*英語*/
.es_{background:url(chlink/es_chlink.webp) no-repeat right 10px/contain;}   /*スペイン*/
.fr_{background:url(chlink/fr_chlink.webp) no-repeat right 10px/contain;}   /*フランス*/
.hi_{background:url(chlink/hi_chlink.webp) no-repeat right 10px/contain;}   /*ヒンディー*/
.id_{background:url(chlink/id_chlink.webp) no-repeat right 10px/contain;}   /*インドネシア*/
.ko_{background:url(chlink/ko_chlink.webp) no-repeat right 10px/contain;}   /*韓国*/
.pt_{background:url(chlink/pt_chlink.webp) no-repeat right 10px/contain;}   /*ポルトガル*/
.ru_{background:url(chlink/ru_chlink.webp) no-repeat right 10px/contain;}   /*ロシア*/
.th_{background:url(chlink/th_chlink.webp) no-repeat right 10px/contain;}   /*タイ*/

/*モバイルファースト幅820基準*/
#chlinkwaku{width:clamp(40px,calc(80/820*100vw),150px); height:1000px; position:absolute; top:clamp(20px,calc(50/820*100vw),50px); right:0;}   /*スティッキーのチャンネルリンク用枠でheightはmainjsで変更させる*/
header{max-width:820px; height:calc(200/820*100vw); max-height:200px; background:url(header.webp) no-repeat center top/cover; margin:0px auto;}   /*backgroundショートハンド、no-repeatは繰り返し無、left topなどは位置指定でcontain(枠内に収める)を使う為に必須、coverは比率維持＆はみ出した部分トリミング*/
header p{font-size:clamp(20px,calc(4vw*1.2),50px); text-align:center; position:relative; top:clamp(10px,calc(20/820*100vw),20px); margin:0px auto; text-shadow:3px 3px 2px #fff,-3px -3px 2px #fff;}   /*言語によって変わるヘッダータイトル文*/
main{max-width:820px; margin:0px auto; background: url(base.webp);}
section{margin:25px 0 0 0;}   /*nth-childは子要素の指定、orderでテキスト部分のdivを最初に持ってくる(1250pxの時に使う)*/
.c2{display:flex; flex-direction:column; overflow:hidden;}   /*columnは縦並びrowは横並び*/
.c2 div{order:2;}   /*orderはflex内の優先順位、スマホで見た時に画像を上に持っていく用*/
.c2 h3{height:clamp(145px,calc(360/820*100vw),360px); background:#0000; order:1;}
.c2 h3 img,iframe{width:clamp(250px,calc(640/820*100vw),640px); margin:0px clamp(10px,calc(90/820*100vw),90px);}
.c2 p{margin:5px 20px;}
.c3{display:flex; flex-direction:row; overflow:hidden;}
.c3 div{width:clamp(120px,calc(0.33*100vw),270px);}
.c3 div img{width:clamp(90px,calc(0.25*100vw),220px);}
.c3 p{margin:5px 20px; text-align:center;}
#li2_m{font-size:clamp(15px,calc(7vw*0.9 - 3px),34px); text-align:center; margin:0px 15px; text-decoration:underline solid;}
.c4{display:flex; flex-direction:row; overflow:hidden;}
.c4 div{width:clamp(90px,calc(0.25*100vw),205px);}
.c4 div img{width:clamp(70px,calc(0.20*100vw),164px); transition:0.5s;}
.c4 p{margin:5px 10px; text-align:center; font-size:clamp(8px,calc(3vw*0.8 - 1px),16px);}
iframe{height:calc(360/820*100vw); max-height:360px;}   /*googlemap用*/
.icon{width:clamp(30px,calc(0.08*100vw),60px); margin:0px 20px 20px;}
footer{max-width:820px; height:calc(820/820*100vw); max-height:25px; text-align:center; margin:0px auto; background:#fff; clear:both;}   /*clear:bothはfloatを指定していた場合の解除*/

@media screen and (min-width:1250px){   /*幅1250以上なら読み込む*/
#chlinkwaku{right:clamp(0px,calc(15/675*100vw),300px);}   /*スティッキーのチャンネルリンクが離れ過ぎないように調整*/
.chlink{margin-top:0px;}
header{max-width:1250px;}
main{max-width:1250px;}
section:nth-child(2n-1) .c2 div{order:-1; background:#cff0;}   /*nth-childは子要素の指定、orderでテキスト部分のdivを最初に持ってくる*/
.c2,.c3{max-width:1250px; display:flex; justify-content:space-between; flex-direction:row; padding:0 0 20px;}   /*2カラム、3カラムにする用クラスで、justify-content:space-betweenで両端揃えにする*/
.c2 div{width:580px;}   /*2カラムの文章ブロックの幅*/
.c2 h3{height:clamp(145px,calc(360/820*100vw),360px); background:#0000;}
.c2 h3 img,iframe{width:clamp(250px,calc(640/820*100vw),640px); margin:0 20px;}
.c3 div{width:clamp(130px,calc(0.33*100vw),400px);}
.c3 div img{width:clamp(100px,calc(0.25*100vw),350px);}
.c3 p{font-size:clamp(12px,calc(3vw*0.8 - 1px),25px); margin:0;}
.c4 div{width:clamp(130px,calc(0.25*100vw),300px);}
.c4 div img{width:clamp(100px,calc(0.20*100vw),230px);}
.c4 p{font-size:clamp(12px,calc(3vw*0.8 - 1px),25px); margin:0;}
footer{max-width:1250px;}
}   /*幅1250以上読み込み終了*/