@charset "utf-8"; /* -------------------------------------------- */ /* TOP Page --- トップページ */ /* -------------------------------------------- */ body.top {} /* TOP IMAGE --- トップイメージ */ body.top .topimage { background-color: rgb(0, 0, 0); } body.top .topimage .topimage_inner { height: 100%; } body.top .topimage .topimage_inner img { width: 960px; } /* -------------------------------------------- */ /* PICKUP --- ピックアップ */ body.top div.pickup { border-top: 12px solid rgb(153, 2, 27); border-bottom: 12px solid rgb(0, 0, 0); padding: 12px; } /* ひだり */ /* box */ body.top div.pickup .pickup_item1 { width: 40%; background-color: rgb(153, 2, 27); margin-right: 20px; border-radius: 10px; } body.top div.pickup .pickup_item1 a { display: block; width: 100%; height: 150px; text-decoration: none; } /* ----------- box-内容 ---------------- */ body.top div.pickup .pickup_item1 a span { display: inline-block; margin-left: 50px; font-weight: bold; color: #fff; } body.top div.pickup .pickup_item1 a span.hiduke { font-size: 38px; margin-top: 20px; letter-spacing: 0.05em; } body.top div.pickup .pickup_item1 a span.youbi { font-size: 16px; margin-left: 5px; writing-mode: vertical-rl; } body.top div.pickup .pickup_item1 a span.start { font-size: 68px; letter-spacing: 0.12em; } /* みぎ */ /* box */ body.top div.pickup .pickup_item2 { width: 60%; } /*ピックアップ右側の水平方向の揃え*/ body.top div.pickup .pickup_item2 ul.container { justify-content: space-between; padding: 0; } body.top div.pickup .pickup_item2 li { width: 30%; height: 150px; text-align: center; list-style: none; } body.top div.pickup .pickup_item2 li a { text-decoration: none; color: #FFF; display: inline-block; margin: 10px; line-height: 1.5em; font-size: 1.2em; } body.top div.pickup .pickup_item2 li.itemlist1 { background-image: url("../img/box01.png"); background-color: rgba(0,0,0,0.8); background-blend-mode: darken; } body.top div.pickup .pickup_item2 li.itemlist2 { background-image: url("../img/box02.png"); background-color: rgba(0,0,0,0.6); background-blend-mode: darken; } body.top div.pickup .pickup_item2 li.itemlist3 { background-image: url("../img/box03.png"); background-color: rgba(0,0,0,0.7); background-blend-mode: darken; } /* -------------------------------------------- */ /* main --- メイン */ /* 新着情報 */ body.top div.main { } body.top div.main dl { margin: 50px; } body.top div.main dt { border-bottom: 1px dotted rgb(116, 116, 116); display: inline-block; width: 120px; margin-left: 10px; line-height: 1.5em; color: rgb(153, 2, 27); } body.top div.main dd { border-bottom: 1px dotted rgb(116, 116, 116); display: inline-block; width: 720px; margin-bottom: 30px; margin-left: 0; line-height: 1.5em; } /* 協賛広告 */ body div.main div.sponsor { display: flex; flex-wrap: wrap; justify-content: flex-start; } body div.main div.sponsor .ad { width: 300px; /* height: 80px;background-color: rgb(231, 231, 231); */ margin-bottom: 20px; margin-left: 10px; margin-right: 10px; } /* 大会結果 */ body.past div.main .result ul { width: 70%; margin: 0 auto 40px; display: flex; list-style: none; padding: 0; } body.past div.main .result ul li { width: 25%; padding: 0; } body.past div.main .result ul li a { display: inline-block; background-color: rgb(224, 201, 125); width: 150px; margin: 10px; line-height: 50px; text-align: center; text-decoration: none; border-radius: 30px; color: rgb(0, 0, 0); } body.past div.main .result ul li a:hover { background-color: rgb(153, 2, 27); color: rgb(255, 255, 255); } /* 大会情報・会場案内 共通資料リスト */ body div.main .pdflist ul { width: 80%; margin: 0 auto 40px; list-style: none; padding: 0; } body div.main .pdflist ul li { padding: 0; } body div.main .pdflist ul li a { display: inline-block; width: 91%; margin: 10px; padding: 8px 20px; line-height: 40px; text-decoration: none; color: rgb(0, 0, 0); background-color: rgb(236, 236, 236); border-radius: 8px; } body div.main .pdflist ul li a:hover { background-color: rgb(153, 2, 27); color: rgb(255, 255, 255); } /* 新着情報一覧 */ body.infolist div.main dl { margin: 50px; } body.infolist div.main dt { border-bottom: 1px dotted rgb(116, 116, 116); display: inline-block; width: 120px; margin-left: 10px; line-height: 1.5em; color: rgb(153, 2, 27); } body.infolist div.main dd { border-bottom: 1px dotted rgb(116, 116, 116); display: inline-block; width: 720px; margin-bottom: 30px; margin-left: 0; line-height: 1.5em; } dd#toinfolist { text-align: right; color: crimson; } /* 960px〜1279px:小型PC ------------------------------ */ @media screen and (min-width:960px) and (max-width:1279px) { } /* 600px〜959px:タブレット ------------------------------ */ @media screen and (min-width:600px) and (max-width:959px) { } /* 480px〜599px:SP横 ------------------------------ */ @media screen and (min-width:480px) and (max-width:599px) { } /* 〜479px:スマートフォン縦 ------------------------------ */ @media screen and (max-width:479px) { body.top .topimage .topimage_inner { height: 100%; } body.top .topimage .topimage_inner img { width: 100vw; } /* PICKUP --- ピックアップ */ body.top div.pickup { visibility: hidden; height: 0; } /* 新着情報 */ body.top div.main { } body.top div.main dl { margin: 20px; } body.top div.main dt { display: inline-block; margin-left: 10px; line-height: 1.5em; color: rgb(153, 2, 27); border-bottom: none; } body.top div.main dd { border-bottom: 1px dotted rgb(116, 116, 116); display: inline-block; width: 90vw; margin-bottom: 30px; margin-left: 0; line-height: 1.5em; } /* 協賛広告 */ body.top div.main div.sponsor { display: flex; flex-wrap: wrap; justify-content: space-around; } body.top div.main div.sponsor .ad { width: 300px; height: 80px; background-color: rgb(231, 231, 231); margin-bottom: 20px; } body.infolist div.main dl { margin: 20px; } body.infolist div.main dt { display: inline-block; margin-left: 10px; line-height: 1.5em; color: rgb(153, 2, 27); border-bottom: none; } body.infolist div.main dd { border-bottom: 1px dotted rgb(116, 116, 116); display: inline-block; width: 90vw; margin-bottom: 30px; margin-left: 0; line-height: 1.5em; } }