@charset "UTF-8";
/* テキストに線 1px */
/* テキストに線 2px */
/* テキストに線 3px */
/* テキストに線 4px */
/* テキストに線 5px */
/* テキストに線 6px */
/* テキストに線 7px */
/* テキストに線 8px */
/* テキストに線 10px */
/* ボックスシャドー */
/* mixin の内容指定 配色 */
/* line 58, ../../scss/kyu/layout.scss */
body {
min-width: auto;
}
/* 共通レイアウト
------------------------------------------------------*/
/* line 64, ../../scss/kyu/layout.scss */
#container {
width: 100%;
padding: 1px 0;
}
/* line 67, ../../scss/kyu/layout.scss */
#container::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url(../../images/kyu/common/kyuranger_bg.jpg) top center no-repeat fixed;
background-size: cover;
}
/* line 81, ../../scss/kyu/layout.scss */
.wrapCol {
max-width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
/* line 81, ../../scss/kyu/layout.scss */
.wrapCol {
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
}
}
/* 基本のコンテンツ枠 */
/* line 95, ../../scss/kyu/layout.scss */
.kyuBasicFrame {
position: relative;
z-index: 10;
}
/* line 99, ../../scss/kyu/layout.scss */
.kyuBasicFrameCorner {
padding: 1em;
background: url(../../images/kyu/common/bg_basic_frame_corner.png) no-repeat top left, url(../../images/kyu/common/bg_basic_frame_corner.png) no-repeat top right, url(../../images/kyu/common/bg_basic_frame_corner.png) no-repeat bottom left, url(../../images/kyu/common/bg_basic_frame_corner.png) no-repeat bottom right;
background-size: 2em;
background-clip: border-box,border-box,border-box,border-box,content-box;
}
@media screen and (min-width: 769px) {
/* line 99, ../../scss/kyu/layout.scss */
.kyuBasicFrameCorner {
padding: 1.4em;
background-size: 2.8em;
margin-top: 2%;
}
}
/* line 116, ../../scss/kyu/layout.scss */
.kyuBasicFrameBg {
background: url(../../images/kyu/common/bg_basic_frame.jpg) repeat-y center;
background-size: 100% auto;
border: white solid 1px;
box-shadow: 0px 0px 7px 3px rgba(0, 255, 240, 0.59), 0px 0px 4px 2px #00fff0 inset;
position: relative;
z-index: 0;
}
/* line 124, ../../scss/kyu/layout.scss */
.basicFrameInner {
position: relative;
z-index: 30;
padding: 1em;
word-wrap: break-word;
}
/* コンテンツ 小パート */
/* line 133, ../../scss/kyu/layout.scss */
.partCell {
background: white;
border-radius: 2px;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}
/**/
/* line 139, ../../scss/kyu/layout.scss */
.partColorRed .partCell {
border: #ed0003 2px solid;
}
/* line 140, ../../scss/kyu/layout.scss */
.partColorBlue .partCell {
border: #0091ed 2px solid;
}
/* line 141, ../../scss/kyu/layout.scss */
.partColorGreen .partCell {
border: #00dc49 2px solid;
}
/* line 142, ../../scss/kyu/layout.scss */
.partColorYellow .partCell {
border: #ffce00 2px solid;
}
/* line 143, ../../scss/kyu/layout.scss */
.partColorEmerald .partCell {
border: emerald, #00b0a8 2px solid;
}
/* line 144, ../../scss/kyu/layout.scss */
.partColorViolet .partCell {
border: #4d2cdf 2px solid;
}
/* line 145, ../../scss/kyu/layout.scss */
.partColorOrange .partCell {
border: #ffce00 2px solid;
}
/* ページ共通レイアウト
------------------------------------------------------*/
/* line 153, ../../scss/kyu/layout.scss */
.contWrapp {
padding: 1%;
}
/* line 156, ../../scss/kyu/layout.scss */
.contWrapp .inner {
padding: 1.6%;
background: rgba(255, 255, 255, 0.8);
border-radius: 6px;
box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.3);
}
/* line 162, ../../scss/kyu/layout.scss */
.contWrapp h3 {
border-radius: 6px;
padding: 0.6em 1em 0.6em 2.4em;
font-size: 3.2em;
font-weight: bold;
}
@media screen and (max-width: 768px) {
/* line 162, ../../scss/kyu/layout.scss */
.contWrapp h3 {
font-size: 2.2em;
padding: 0.8em 1em 0.8em 2.6em;
}
}
/*バイオレット*/
/* line 175, ../../scss/kyu/layout.scss */
.violet h3 {
box-shadow: 0px 0px 10px 2px #5100ff inset;
background: url(../../images/kyu/common/icon_planet_violet.png) no-repeat left center, url(../../images/kyu/common/bg_header.png) no-repeat right center, linear-gradient(-80deg, #4d2cdf 90%, white);
background-size: auto 80%,cover,100%;
color: #4d2cdf;
text-shadow: 0px 3px 1px rgba(255, 255, 255, 0.6), 0px 2px 1px rgba(255, 255, 255, 0.6), 1px 2px 1px rgba(255, 255, 255, 0.6), 2px 2px 1px rgba(255, 255, 255, 0.6), 2px 1px 1px rgba(255, 255, 255, 0.6), 2px 0px 1px rgba(255, 255, 255, 0.6), 3px 0px 1px rgba(255, 255, 255, 0.6), 2px -1px 1px rgba(255, 255, 255, 0.6), 2px -2px 1px rgba(255, 255, 255, 0.6), 2px -3px 1px rgba(255, 255, 255, 0.6), 1px -3px 1px rgba(255, 255, 255, 0.6), 0px -3px 1px rgba(255, 255, 255, 0.6), -1px -3px 1px rgba(255, 255, 255, 0.6), -2px -3px 1px rgba(255, 255, 255, 0.6), -3px -3px 1px rgba(255, 255, 255, 0.6), -3px -2px 1px rgba(255, 255, 255, 0.6), -3px -1px 1px rgba(255, 255, 255, 0.6), -3px 0px 1px rgba(255, 255, 255, 0.6), -3px 1px 1px rgba(255, 255, 255, 0.6), -3px 2px 1px rgba(255, 255, 255, 0.6), -2px 2px 1px rgba(255, 255, 255, 0.6), -1px 2px 1px rgba(255, 255, 255, 0.6);
}
/* line 176, ../../scss/kyu/layout.scss */
.violet .inner {
box-shadow: 0px 0px 10px 2px #5100ff;
}
/* line 179, ../../scss/kyu/layout.scss */
.contWrapp h4 {
font-size: 3.4em;
font-weight: bold;
text-align: center;
word-spacing: 0.4em;
border-radius: 4px;
padding: 0.4em 0;
margin: 0 0 1%;
border: rgba(255, 255, 255, 0.8) 2px solid;
color: #fff;
}
/* line 190, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarRed {
text-shadow: 0px 4px 1px #E50003, 0px 3px 1px #E50003, 1px 3px 1px #E50003, 2px 3px 1px #E50003, 2px 2px 1px #E50003, 3px 2px 1px #E50003, 3px 1px 1px #E50003, 3px 0px 1px #E50003, 4px 0px 1px #E50003, 3px -1px 1px #E50003, 3px -2px 1px #E50003, 3px -3px 1px #E50003, 2px -3px 1px #E50003, 2px -4px 1px #E50003, 1px -4px 1px #E50003, 0px -4px 1px #E50003, -1px -4px 1px #E50003, -2px -4px 1px #E50003, -3px -4px 1px #E50003, -3px -3px 1px #E50003, -4px -3px 1px #E50003, -4px -2px 1px #E50003, -4px -1px 1px #E50003, -4px 0px 1px #E50003, -4px 1px 1px #E50003, -4px 2px 1px #E50003, -3px 2px 1px #E50003, -3px 3px 1px #E50003, -2px 3px 1px #E50003, -1px 3px 1px #E50003;
background: radial-gradient(rgba(229, 0, 3, 0.6), rgba(229, 0, 3, 0.2));
}
/* line 191, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarBlue {
text-shadow: 0px 4px 1px #003FEB, 0px 3px 1px #003FEB, 1px 3px 1px #003FEB, 2px 3px 1px #003FEB, 2px 2px 1px #003FEB, 3px 2px 1px #003FEB, 3px 1px 1px #003FEB, 3px 0px 1px #003FEB, 4px 0px 1px #003FEB, 3px -1px 1px #003FEB, 3px -2px 1px #003FEB, 3px -3px 1px #003FEB, 2px -3px 1px #003FEB, 2px -4px 1px #003FEB, 1px -4px 1px #003FEB, 0px -4px 1px #003FEB, -1px -4px 1px #003FEB, -2px -4px 1px #003FEB, -3px -4px 1px #003FEB, -3px -3px 1px #003FEB, -4px -3px 1px #003FEB, -4px -2px 1px #003FEB, -4px -1px 1px #003FEB, -4px 0px 1px #003FEB, -4px 1px 1px #003FEB, -4px 2px 1px #003FEB, -3px 2px 1px #003FEB, -3px 3px 1px #003FEB, -2px 3px 1px #003FEB, -1px 3px 1px #003FEB;
background: radial-gradient(rgba(0, 63, 235, 0.6), rgba(0, 63, 235, 0.2));
}
/* line 192, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarGreen {
text-shadow: 0px 4px 1px #00C36B, 0px 3px 1px #00C36B, 1px 3px 1px #00C36B, 2px 3px 1px #00C36B, 2px 2px 1px #00C36B, 3px 2px 1px #00C36B, 3px 1px 1px #00C36B, 3px 0px 1px #00C36B, 4px 0px 1px #00C36B, 3px -1px 1px #00C36B, 3px -2px 1px #00C36B, 3px -3px 1px #00C36B, 2px -3px 1px #00C36B, 2px -4px 1px #00C36B, 1px -4px 1px #00C36B, 0px -4px 1px #00C36B, -1px -4px 1px #00C36B, -2px -4px 1px #00C36B, -3px -4px 1px #00C36B, -3px -3px 1px #00C36B, -4px -3px 1px #00C36B, -4px -2px 1px #00C36B, -4px -1px 1px #00C36B, -4px 0px 1px #00C36B, -4px 1px 1px #00C36B, -4px 2px 1px #00C36B, -3px 2px 1px #00C36B, -3px 3px 1px #00C36B, -2px 3px 1px #00C36B, -1px 3px 1px #00C36B;
background: radial-gradient(rgba(0, 195, 107, 0.6), rgba(0, 195, 107, 0.2));
}
/* line 193, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarYellow {
text-shadow: 0px 4px 1px #FFB600, 0px 3px 1px #FFB600, 1px 3px 1px #FFB600, 2px 3px 1px #FFB600, 2px 2px 1px #FFB600, 3px 2px 1px #FFB600, 3px 1px 1px #FFB600, 3px 0px 1px #FFB600, 4px 0px 1px #FFB600, 3px -1px 1px #FFB600, 3px -2px 1px #FFB600, 3px -3px 1px #FFB600, 2px -3px 1px #FFB600, 2px -4px 1px #FFB600, 1px -4px 1px #FFB600, 0px -4px 1px #FFB600, -1px -4px 1px #FFB600, -2px -4px 1px #FFB600, -3px -4px 1px #FFB600, -3px -3px 1px #FFB600, -4px -3px 1px #FFB600, -4px -2px 1px #FFB600, -4px -1px 1px #FFB600, -4px 0px 1px #FFB600, -4px 1px 1px #FFB600, -4px 2px 1px #FFB600, -3px 2px 1px #FFB600, -3px 3px 1px #FFB600, -2px 3px 1px #FFB600, -1px 3px 1px #FFB600;
background: radial-gradient(rgba(255, 206, 0, 0.8), rgba(255, 206, 0, 0.2));
}
/* line 194, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarLightGreen {
text-shadow: 0px 4px 1px #569B0F, 0px 3px 1px #569B0F, 1px 3px 1px #569B0F, 2px 3px 1px #569B0F, 2px 2px 1px #569B0F, 3px 2px 1px #569B0F, 3px 1px 1px #569B0F, 3px 0px 1px #569B0F, 4px 0px 1px #569B0F, 3px -1px 1px #569B0F, 3px -2px 1px #569B0F, 3px -3px 1px #569B0F, 2px -3px 1px #569B0F, 2px -4px 1px #569B0F, 1px -4px 1px #569B0F, 0px -4px 1px #569B0F, -1px -4px 1px #569B0F, -2px -4px 1px #569B0F, -3px -4px 1px #569B0F, -3px -3px 1px #569B0F, -4px -3px 1px #569B0F, -4px -2px 1px #569B0F, -4px -1px 1px #569B0F, -4px 0px 1px #569B0F, -4px 1px 1px #569B0F, -4px 2px 1px #569B0F, -3px 2px 1px #569B0F, -3px 3px 1px #569B0F, -2px 3px 1px #569B0F, -1px 3px 1px #569B0F;
background: radial-gradient(rgba(121, 201, 0, 0.6), rgba(121, 201, 0, 0.2));
}
/* line 195, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarEmerald {
text-shadow: 0px 4px 1px #0196a8, 0px 3px 1px #0196a8, 1px 3px 1px #0196a8, 2px 3px 1px #0196a8, 2px 2px 1px #0196a8, 3px 2px 1px #0196a8, 3px 1px 1px #0196a8, 3px 0px 1px #0196a8, 4px 0px 1px #0196a8, 3px -1px 1px #0196a8, 3px -2px 1px #0196a8, 3px -3px 1px #0196a8, 2px -3px 1px #0196a8, 2px -4px 1px #0196a8, 1px -4px 1px #0196a8, 0px -4px 1px #0196a8, -1px -4px 1px #0196a8, -2px -4px 1px #0196a8, -3px -4px 1px #0196a8, -3px -3px 1px #0196a8, -4px -3px 1px #0196a8, -4px -2px 1px #0196a8, -4px -1px 1px #0196a8, -4px 0px 1px #0196a8, -4px 1px 1px #0196a8, -4px 2px 1px #0196a8, -3px 2px 1px #0196a8, -3px 3px 1px #0196a8, -2px 3px 1px #0196a8, -1px 3px 1px #0196a8;
background: radial-gradient(rgba(0, 213, 159, 0.6), rgba(0, 213, 159, 0.2));
}
/* line 196, ../../scss/kyu/layout.scss */
.contWrapp h4.bgTitBarOrange {
text-shadow: 0px 4px 1px #ff7800, 0px 3px 1px #ff7800, 1px 3px 1px #ff7800, 2px 3px 1px #ff7800, 2px 2px 1px #ff7800, 3px 2px 1px #ff7800, 3px 1px 1px #ff7800, 3px 0px 1px #ff7800, 4px 0px 1px #ff7800, 3px -1px 1px #ff7800, 3px -2px 1px #ff7800, 3px -3px 1px #ff7800, 2px -3px 1px #ff7800, 2px -4px 1px #ff7800, 1px -4px 1px #ff7800, 0px -4px 1px #ff7800, -1px -4px 1px #ff7800, -2px -4px 1px #ff7800, -3px -4px 1px #ff7800, -3px -3px 1px #ff7800, -4px -3px 1px #ff7800, -4px -2px 1px #ff7800, -4px -1px 1px #ff7800, -4px 0px 1px #ff7800, -4px 1px 1px #ff7800, -4px 2px 1px #ff7800, -3px 2px 1px #ff7800, -3px 3px 1px #ff7800, -2px 3px 1px #ff7800, -1px 3px 1px #ff7800;
background: radial-gradient(rgba(229, 113, 0, 0.6), rgba(229, 113, 0, 0.2));
}
@media screen and (max-width: 768px) {
/* line 179, ../../scss/kyu/layout.scss */
.contWrapp h4 {
font-size: 1.8em;
font-weight: bold;
text-align: center;
word-spacing: 0.4em;
border-radius: 4px;
padding: 0.5em 0;
margin: 0 0 1%;
border: rgba(255, 255, 255, 0.8) 2px solid;
}
}
/* ↓ スマホ表示(横幅768px以下) ↓ */
@media screen and (max-width: 768px) {
/* PC のみ表示する箇所を spで非表示化 */
/* line 216, ../../scss/kyu/layout.scss */
.only_pc {
display: none;
}
/* line 219, ../../scss/kyu/layout.scss */
.allWrapp {
background: url(../../images/kyu/common/kyuranger_bg.jpg) top center no-repeat;
background-size: contain;
}
/* line 223, ../../scss/kyu/layout.scss */
.wrapCol .wrapColInner {
padding: 1em 0 0 0;
}
}
/* line 231, ../../scss/kyu/layout.scss */
.btnBackTopWrap {
padding: min(8vw , 40px) 0 min(10vw , 60px);
text-align: center;
}
/* line 235, ../../scss/kyu/layout.scss */
.btnBackTop {
position: relative;
display: inline-block;
margin: 0 auto;
color: #fff;
padding: 1.4em 1em 1.4em 30px;
font-size: 1.4em;
min-width: 280px;
background: rgba(51, 51, 51, 0.8);
border: #222222 1px solid;
text-decoration: none;
font-weight: bold;
}
@media screen and (max-width: 768px) {
/* line 235, ../../scss/kyu/layout.scss */
.btnBackTop {
min-width: 230px;
font-size: 1em;
padding: 1.7em 1.5em 1.7em 30px;
}
}
/* line 254, ../../scss/kyu/layout.scss */
.btnBackTop::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
transform: rotate(-45deg) translate(0, -50%);
position: absolute;
top: 50%;
left: 15px;
line-height: 0.9;
}
@media (hover: hover) {
/* line 235, ../../scss/kyu/layout.scss */
.btnBackTop {
transition: opacity 0.3s;
}
/* line 270, ../../scss/kyu/layout.scss */
.btnBackTop:hover {
opacity: 0.7;
}
}