@charset "UTF-8";
@font-face { font-family: YuGothicM; src: local(Yu Gothic Medium); }

* { margin: 0; padding: 0; }
html { font-size: 62.5%; }
body { color: #003876; font-family: YuGothic,YuGothicM,Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif; font-size: 1.6em; line-height: 1.8; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix:after { content: ''; display: block; clear: both; }

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
	ヘッダ
-------------------------------------------------- */

header { margin-bottom: 32px; width: 1920px; height: 800px; background: url(../img/back.gif) center no-repeat; background-size: cover; position: relative; transform-origin: top left; }
header img.logo { margin: 0 auto; max-width: 1012px; height: auto; position: absolute; top: 210px; left: 0; right: 0; z-index: 2; }
header img.theme { margin: 0 auto; height: auto; position: absolute; top: 620px; left: 0; right: 0; z-index: 2; }
header img.top { width: 100%; height: auto; }
header img.left { max-width: 576px; height: auto; position: absolute; bottom: 0; left: 0; }
header img.right { height: auto; position: absolute; bottom: 0; right: 0; }

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
	コンテンツ
-------------------------------------------------- */

div#contents { width: 100%; position: absolute; top: 832px; }
div#contents div.inner { width: 100%; position: relative; overflow: hidden; }
main { display: block; }

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
	写真
-------------------------------------------------- */

div#photo { margin: 0 auto 80px; width: 1200px; }
div#photo ul { list-style: none; text-align: center; }
div#photo li { margin: 0 10px; display: inline-block; }
div#photo li img { width: 224px; height: 164px; }

@media screen and (max-width: 767px) {
div#photo { width: auto; display: none; }
}

/* --------------------------------------------------
	ナビゲーション
-------------------------------------------------- */

nav#globalNavi { margin: 0 auto 100px; width: 1200px; }
nav#globalNavi ul { margin: 0 auto; width: 568px; list-style: none; }
nav#globalNavi li { margin: 0 30px; float: left; }
nav#globalNavi li a { height: 58px; display: block; position: relative; }
nav#globalNavi li a::after { content: ''; width: 100%; height: 3px; background: #0599d9; position: absolute; left: 0; bottom: -10px; }
nav#globalNavi li img { position: absolute; bottom: 0; }
nav#globalNavi li.navi01 { width: 236px; }
nav#globalNavi li.navi01 img { width: 236px; height: auto; }
nav#globalNavi li.navi02 { width: 75px; }
nav#globalNavi li.navi02 img { width: 75px; height: auto; }
nav#globalNavi li.navi03 { width: 77px; }
nav#globalNavi li.navi03 img { width: 77px; height: auto; }

@media screen and (max-width: 767px) {
nav#globalNavi { margin-bottom: 50px; width: auto; }
nav#globalNavi ul { width: auto; border: solid 1px #0599d9; }
nav#globalNavi li { margin: 0; width: 50% !important; border: solid 1px #0599d9; box-sizing: border-box; }
nav#globalNavi li:first-child { width: 100% !important; }
nav#globalNavi li a { height: 53px; display: flex; align-items: center; justify-content: center; }
nav#globalNavi li a::after { display: none; }
nav#globalNavi li img { position: static; vertical-align: bottom; }
nav#globalNavi li.navi01 img { width: 130px; }
nav#globalNavi li.navi02 img { width: 42px; }
nav#globalNavi li.navi03 img { width: 42px; }
}

/* --------------------------------------------------
	セクション共通
-------------------------------------------------- */

section { margin: 0 auto 15rem; }
section div.title { text-align: center; }
section div.title h2 { margin-bottom: 6rem; display: inline-block; position: relative; }
section div.title h2::after { content: ''; padding: 0 20px; width: 100%; height: 38px; background: #ff0; position: absolute; left: -20px; bottom: -18px; }
section div.title img { height: auto; position: relative; z-index: 2; }
section p.text { margin-bottom: 5rem; font-weight: bold; text-align: center; }

@media screen and (max-width: 767px) {
section { margin-bottom: 10rem; }
section div.title h2::after { height: 24px; bottom: -5px; }
section p.text { text-align: left; }
section p.text br { display: none; }
}

/* --------------------------------------------------
	伝トーク!!とは
-------------------------------------------------- */

section#about { width: 1200px; text-align: center; }
section#about div.title strong { margin-bottom: 1.5rem; font-size: 3rem; display: block; }
section#about p.text { margin-bottom: 3rem; }
section#about div.note { margin: 40px 0 20px; padding: 30px; background: #f4f4f4; }
section#about div.note strong { margin-bottom: 1rem; padding-left: 40px; background: url(../img/icon.png) 0 center no-repeat; background-size: 30px auto; font-size: 2rem; display: inline-block; }
section#about div.note ul { margin: 20px auto 0 ; width: 700px; list-style: none; }
section#about div.note li { padding: 20px 15px; width: 320px; text-align: left; float: left; }
section#about div.note li img { margin-bottom: 1rem; width: 100%; height: auto; border-radius: 0 24px 0 24px; }
section#about div.note li strong { margin-bottom: 0.5rem; padding-left: 0; background: none; font-size: 1.6rem; }

@media screen and (max-width: 767px) {
section#about { padding: 0 10px; width: auto; text-align: left; }
section#about div.title strong { font-size: 2.4rem; }
section#about p br { display: none; }
section#about div.note { padding: 24px; }
section#about div.note ul { margin: 0; width: auto; }
section#about div.note li { padding: 20px 0; width: auto; text-align: left; float: none; }
section#about div.note li br { display: block; }
section#about div.note li img { margin: 0 auto 1rem; max-width: 480px; height: auto; display: block; }
}

/* --------------------------------------------------
	伝トーク!!番組
-------------------------------------------------- */

section#programme { /*width: 800px;*/ width: 1200px; }
section#programme div.title img { width: 480px; }
section#programme div#youtubeDescription { padding: 0 60px; }
section#programme ul { margin: 30px auto 0; width: 900px; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
section#programme li { margin-bottom: 20px; width: 430px; }
section#programme li div { margin-bottom: 1em; padding-top: 56.25%; width: 100%; position: relative; }
section#programme li iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
section#programme strong { font-size: 2rem; text-align: center; display: block; }
section#programme p { margin: 0 auto; width: 900px; }

@media screen and (max-width: 767px) {
section#programme { padding: 0 10px; width: auto; }
section#programme div.title img { width: 240px; }
section#programme div#youtubeDescription { padding: 0; }
section#programme ul { width: auto; display: block; }
section#programme li { width: 100%; }
section#programme p { width: auto; }
}

/* --------------------------------------------------
	話士
-------------------------------------------------- */

section#talker { width: 800px_____; width: 686px; }
section#talker div.title { text-align: center; }
section#talker div.title img { width: 196px; height: auto; }
section#talker dl { margin-bottom: 85px; }
section#talker dt { width: 450px; float: left; }
section#talker dt img { width: 450px; height: 520px; border-radius: 0 24px 0 24px; }
section#talker dd { width: 330px_____; width: 216px; float: right; }
section#talker dd img { margin-bottom: 15px; width: 216px; height: 216px; border-radius: 0 24px 0 24px; }
section#talker dd strong { font-size: 2.1rem; display: block; }
section#talker dd span { font-size: 1.4rem; display: block; }
section#talker dd p { font-size: 1.3rem; }

@media screen and (max-width: 767px) {
section#talker { padding: 0 10px; width: auto; }
section#talker div.title img { width: 98px; }
section#talker dl { margin-bottom: 55px; }
section#talker dt { width: auto; float: none; }
section#talker dt img { margin: 0 auto 15px; width: 100%; max-width: 450px; height: auto; display: block; }
section#talker dd { width: auto; float: none; }
section#talker dd img { margin: 0 auto 15px; display: block; }
}


/* --------------------------------------------------
	行司
-------------------------------------------------- */

section#referee { width: 600px; }
section#referee div.title { text-align: center; }
section#referee div.title img { width: 196px; height: auto; }
section#referee dl {}
section#referee dt { width: 306px; float: left; }
section#referee dt img { width: 306px; height: 306px; border-radius: 0 24px 0 24px; }
section#referee dd { width: 270px; float: right; }
section#referee dd strong { font-size: 2.1rem; display: block; }
section#referee dd span { font-size: 1.4rem; display: block; }
section#referee dd p { font-size: 1.3rem; }

@media screen and (max-width: 767px) {
section#referee { padding: 0 10px; width: auto; }
section#referee div.title img { width: 98px; }
section#referee dt { width: auto; float: none; }
section#referee dt img { margin: 0 auto 15px; width: auto; max-width: 306px; height: auto; display: block; }
section#referee dd { width: auto; float: none; }
}

/* --------------------------------------------------
	フッタ
-------------------------------------------------- */

footer { margin: 0 auto; width: 1200px; text-align: center; }
footer p { margin-bottom: 6rem; text-align: center; }
footer p strong { font-size: 2.4rem; font-weight: normal; }
footer img.facebook { margin-bottom: 10rem; width: 80px; height: auto; display: inline-block; }
footer img#pagetop { width: 94px; height: auto; position: fixed; bottom: 20px; right: 20px; z-index: 100; }
footer .archives { display: flex; justify-content: center; }
footer .archives a { margin: 0 10px; }

@media screen and (max-width: 767px) {
footer { padding: 0 10px 20px; width: auto; }
footer p { margin-bottom: 4rem; }
footer p strong { font-size: 2rem; }
footer img.facebook { margin-bottom: 5rem; width: 60px; }
footer img#pagetop { width: 60px; bottom: 10px; right: 10px; }
footer .archives { display: block; }
footer .archives a { margin-bottom: 20px; display: inline-block; }
}

/* --------------------------------------------------
	力士
-------------------------------------------------- */

div.rikishi img { position: absolute; z-index: 99; transition: all 0.5s ease; }
div.rikishi img.rikishi01 { top: 1000px; }
div.rikishi img.rikishi02 { top: 1800px; }
div.rikishi img.rikishi03 { top: 2600px; }
div.rikishi img.rikishi04 { top: 3400px; }
div.rikishi img.rikishi05 { top: 4200px }
div.rikishi img.rikishi06 { top: 5000px; }
div.rikishi img.rikishi07 { top: 5800px; }
div.rikishi img.rikishi08 { top: 6600px; }
div.rikishi img.left { left: -200px; }
div.rikishi img.left.isVisible { left: -150px; }
div.rikishi img.right { right: -200px; }
div.rikishi img.right.isVisible { right: -150px; }

@media screen and (max-width: 767px) {
div.rikishi { display: none; }
}