/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

body { margin: 0; }

h1 { font-size: 2em; margin: 0.67em 0; }

hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

a { background-color: transparent; }

abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

b, strong { font-weight: bolder; }

code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

img { border-style: none; }

button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

button, input { /* 1 */ overflow: visible; }

button, select { /* 1 */ text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { padding: 0.35em 0.75em 0.625em; }

legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

progress { vertical-align: baseline; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

details { display: block; }

summary { display: list-item; }

template { display: none; }

[hidden] { display: none; }

/******************************************************************
reset
******************************************************************/
main { display: block; }

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd { margin: 0; padding: 0; }

li { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

iframe { border: 0; }

button { background-color: transparent; border: none; cursor: pointer; padding: 0; appearance: none; }

em { font-style: normal; font-weight: bold; }

fieldset { border: 0; padding: 0; margin: 0; }

address { font-style: normal; }

/******************************************************************
base
******************************************************************/
body { min-width: 320px; font-family: "Shin Maru Go Medium", "Hiragino Kaku Gothic ProN", Meiryo, "Lucida Grande", sans-serif; font-size: 0.9rem; color: #4b4948; line-height: 1.8; -webkit-font-smoothing: antialiased; }

@media screen and (max-width: 736px) { body { font-size: 0.9rem; } }

body[data-menu-open="true"] { overflow: hidden; }

a { color: #3865e0; text-decoration: none; }

a:hover { color: #112a6e; text-decoration: underline; }

h1, h2 { line-height: 1.5; }

h3 { line-height: 1.6; }

h4 { line-height: 1.7; }

small { line-height: 1.6; }

img { max-width: 100%; height: auto; vertical-align: middle; -webkit-backface-visibility: hidden; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #B5C1CC; }

button, input, optgroup, select, textarea { color: #4b4948; line-height: inherit; }

/******************************************************************
layout - wrapper
******************************************************************/
.l-wrapper { width: 100%; overflow: hidden; }

/******************************************************************
layout - header
******************************************************************/
.l-header { background: url(../img/main_bg.jpg) center center/cover no-repeat; padding-top: 0.1px; padding-bottom: 0.1px; }

.l-header__school { position: absolute; top: 20px; left: 20px; }

@media screen and (max-width: 736px) { .l-header__school img { width: 180px; } }

.l-header__inner { max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; }

@media screen and (max-width: 736px) { .l-header__inner { padding-right: 14px; padding-left: 14px; } }

.l-header__inner2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; line-height: 2.4; margin-top: 110px; margin-bottom: 130px; padding: 1rem 0 0 0; }

@media screen and (max-width: 736px) { .l-header__inner2 { margin-top: 60px; margin-bottom: 80px; } }

.l-header .nhk-snsbtn { text-align: right; margin-right: 1rem; }

.l-header__inner3 { padding: 1rem 3rem 3.5rem 3rem; }

@media screen and (max-width: 736px) { .l-header__inner3 { padding: 0.375rem 1.5rem 1.5rem 1.5rem; } }

.l-header__logo { margin-bottom: 45px; }

@media screen and (max-width: 736px) { .l-header__logo { margin-top: 10px; margin-bottom: 25px; padding-left: 10px; padding-right: 10px; } }

.l-header__copy { font-weight: bold; font-size: 20px; margin-bottom: 45px; }

@media screen and (max-width: 736px) { .l-header__copy { font-size: 16px; margin-bottom: 25px; } }

/******************************************************************
layout - header2
******************************************************************/
.l-header2 { background: url(../img/playlist_bg3.jpg) top center no-repeat; padding-top: 0.1px; padding-bottom: 0.1px; }

@media print, screen and (max-width: 1010px) { .l-header2 { background-size: 151% auto; } }

@media screen and (max-width: 736px) { .l-header2 { background: url(../img/playlist_bg3_sp.jpg) top center/100% auto no-repeat; } }

.l-header2__school { position: absolute; top: 20px; left: 20px; }

@media screen and (max-width: 736px) { .l-header2__school img { width: 140px; } }

@media print, screen and (max-width: 320px) { .l-header2__school img { width: 120px; } }

.l-header2__inner { position: relative; max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; }

@media screen and (max-width: 736px) { .l-header2__inner { padding-right: 14px; padding-left: 14px; } }

.l-header2__back { right: 0; position: absolute; text-align: right; padding-top: 20px; padding-right: 20px; }

@media print, screen and (max-width: 1010px) { .l-header2__back { width: 25%; } }

@media screen and (max-width: 736px) { .l-header2__back { padding-top: 10px; width: 43%; } }

@media print, screen and (max-width: 320px) { .l-header2__back { width: 35%; } }

.l-header2__logo { text-align: center; padding-top: 55px; padding-bottom: 18px; }

.l-header2__title { text-align: center; padding-bottom: 80px; }

@media print, screen and (max-width: 1010px) { .l-header2__title { padding-bottom: 8vw; } }

@media print, screen and (max-width: 1010px) { .l-header2__title img { max-height: 9vw; } }

@media screen and (max-width: 736px) { .l-header2__title img { max-height: 15vw; } }

.l-header2 .nhk-snsbtn { text-align: right; margin-right: 1rem; }

/******************************************************************
layout - header3
******************************************************************/
.l-header3 { padding-top: 0.1px; padding-bottom: 0.1px; position: relative; z-index: +1; }

.l-header3__school { position: absolute; top: 20px; left: 20px; }

@media screen and (max-width: 736px) { .l-header3__school img { width: 140px; } }

@media print, screen and (max-width: 320px) { .l-header3__school img { width: 120px; } }

.l-header3__inner { position: relative; max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; }

@media screen and (max-width: 736px) { .l-header3__inner { padding-right: 14px; padding-left: 14px; } }

.l-header3__back { right: 0; position: absolute; text-align: right; padding-top: 20px; padding-right: 20px; }

@media print, screen and (max-width: 1010px) { .l-header3__back { width: 25%; } }

@media screen and (max-width: 736px) { .l-header3__back { padding-top: 10px; width: 43%; } }

@media print, screen and (max-width: 320px) { .l-header3__back { width: 35%; } }

.l-header3 .nhk-snsbtn { text-align: right; margin-right: 1rem; }

/******************************************************************
layout - pagetop
******************************************************************/
[data-pagetop] { position: relative; }

@media print { [data-pagetop] { display: none; } }

[data-pagetop] .l-pagetop__btn { display: none; position: absolute; bottom: 30px; right: 30px; }

[data-pagetop="fixed"] .l-pagetop__btn { position: fixed; z-index: 100; }

@media screen and (max-width: 736px) { [data-pagetop] .l-pagetop__btn { bottom: 10px; right: 10px; } }

.l-pagetop__btn { display: block; box-sizing: border-box; }

.l-pagetop__btn { position: relative; width: 60px; height: 60px; border-radius: 100%; background: #4b4948; transition-property: background; transition-duration: 0.3s; }

.l-pagetop__btn::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: 0; bottom: 0; right: 0; left: 0; transform: translate(11px, 1px) rotate(45deg); transform-origin: top left; border-top: 4px solid #fff; border-left: 4px solid #fff; width: 22px; height: 22px; transition-property: top, right, bottom, left; transition-duration: 0.3s; }

.l-pagetop__btn:hover { background: #fff; }

.l-pagetop__btn:hover::after { border-color: #4b4948; }

@media screen and (max-width: 736px) { .l-pagetop__btn { position: relative; width: 40px; height: 40px; }
  .l-pagetop__btn::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: 0; bottom: 0; right: 0; left: 0; transform: translate(5px, 1px) rotate(45deg); transform-origin: top left; border-top: 2px solid #fff; border-left: 2px solid #fff; width: 10px; height: 10px; transition-property: top, right, bottom, left; transition-duration: 0.3s; } }

/******************************************************************
component - section
******************************************************************/
.c-section { position: relative; padding-top: 0.1px; padding-bottom: 0.1px; }

@media print, screen and (min-width: 737px) { .c-section--contentsrow { padding-right: 0; padding-left: 0; } }

.c-section__fit { max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; }

@media screen and (max-width: 736px) { .c-section__fit { padding-right: 14px; padding-left: 14px; } }

.c-section__top { max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; margin-top: 4rem; }

@media screen and (max-width: 736px) { .c-section__top { padding-right: 14px; padding-left: 14px; } }

.c-section__bottom { max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; margin-bottom: 4rem; }

@media screen and (max-width: 736px) { .c-section__bottom { padding-right: 14px; padding-left: 14px; } }

.c-section__vertical { max-width: 990px; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; margin-top: 4rem; margin-bottom: 4rem; }

@media screen and (max-width: 736px) { .c-section__vertical { padding-right: 14px; padding-left: 14px; } }

.c-section--playlist-link { background: url(../img/playlist_bg4.gif); }

.c-section--playlist-link .c-section__fit { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.c-section--playlist-main { background: url(../img/playlist_bg.png); }

.c-section--playlist-main .c-section__vertical { margin-bottom: 9.2rem; }

@media screen and (max-width: 736px) { .c-section--playlist-main .c-section__vertical { margin-bottom: 5.2rem; } }

.c-section--playlist-archive { background: url(../img/playlist_bg2.jpg) center 90px no-repeat; }

@media screen and (max-width: 736px) { .c-section--playlist-archive { background: url(../img/playlist_bg2_sp.jpg) center 50px/100% auto no-repeat; } }

.c-section--playlist-archive .c-section__vertical { margin-top: 6rem; margin-bottom: 9.2rem; }

@media screen and (max-width: 736px) { .c-section--playlist-archive .c-section__vertical { margin-top: 5.6rem; margin-bottom: 5.2rem; } }

.c-section--plan { background: url(../img/plan_bg.png) center 70px no-repeat; }

@media screen and (max-width: 736px) { .c-section--plan { background-size: 110% auto; background-position: center 10px; } }

.c-section--playlist { background: url(../img/playlist_bg2.jpg) center top repeat-y; border-top: 8px solid #66af54; }

@media screen and (max-width: 736px) { .c-section--playlist { background: url(../img/playlist_bg2_sp.jpg) center top/100% auto repeat-y; border-top: 4px solid #66af54; } }

.c-section--playlist .c-section__vertical { margin-bottom: 9.2rem; }

@media screen and (max-width: 736px) { .c-section--playlist .c-section__vertical { margin-bottom: 5.2rem; } }

.c-section--primary { background: url(../img/orange_bg.jpg); border-top: 8px solid #ff9000; }

@media screen and (max-width: 736px) { .c-section--primary { border-top: 4px solid #ff9000; } }

.c-section--primary .c-section__vertical { margin-bottom: 9.2rem; }

@media screen and (max-width: 736px) { .c-section--primary .c-section__vertical { margin-bottom: 5.2rem; } }

.c-section--junior { background: url(../img/blue_bg.jpg); border-top: 8px solid #3eaae2; }

@media screen and (max-width: 736px) { .c-section--junior { border-top: 4px solid #3eaae2; } }

.c-section--junior .c-section__vertical { margin-bottom: 9.2rem; }

@media screen and (max-width: 736px) { .c-section--junior .c-section__vertical { margin-bottom: 5.2rem; } }

.c-section--infant { background: url(../img/pink_bg.jpg); border-top: 8px solid #ff76a0; }

@media screen and (max-width: 736px) { .c-section--infant { border-top: 4px solid #ff76a0; } }

.c-section--infant .c-section__vertical { margin-bottom: 8rem; }

@media screen and (max-width: 736px) { .c-section--infant .c-section__vertical { margin-bottom: 4rem; } }

.c-section--primary h2, .c-section--junior h2, .c-section--infant h2 { position: absolute; top: -8px; transform: translate(0, -100%); }

@media screen and (max-width: 736px) { .c-section--primary h2, .c-section--junior h2, .c-section--infant h2 { top: -3px; left: 0; width: 100%; text-align: center; }
  .c-section--primary h2 img, .c-section--junior h2 img, .c-section--infant h2 img { width: 250px; } }

@media screen and (max-width: 736px) { .c-section__top { margin-top: 2rem; }
  .c-section__bottom { margin-bottom: 2rem; }
  .c-section__vertical { margin: 2rem auto 2rem auto; } }

/******************************************************************
component - grid2
******************************************************************/
.c-grid2 { overflow: hidden; display: flex; flex-wrap: wrap; margin-right: -1rem; margin-top: -1rem; }

.c-grid2--center { justify-content: center; }

.c-grid2--right { justify-content: flex-end; }

.c-grid2 > [class*="c-grid2__item"], .c-grid2 > .c-grid2__item5col { position: relative; box-sizing: border-box; margin-right: 1rem; margin-top: 1rem; }

.c-grid2 > .c-grid2__item1 { width: calc( 8.33333% - 1rem); }

.c-grid2 > .c-grid2__item2 { width: calc( 16.66667% - 1rem); }

.c-grid2 > .c-grid2__item3 { width: calc( 25% - 1rem); }

.c-grid2 > .c-grid2__item4 { width: calc( 33.33333% - 1rem); }

.c-grid2 > .c-grid2__item5 { width: calc( 41.66667% - 1rem); }

.c-grid2 > .c-grid2__item6 { width: calc( 50% - 1rem); }

.c-grid2 > .c-grid2__item7 { width: calc( 58.33333% - 1rem); }

.c-grid2 > .c-grid2__item8 { width: calc( 66.66667% - 1rem); }

.c-grid2 > .c-grid2__item9 { width: calc( 75% - 1rem); }

.c-grid2 > .c-grid2__item10 { width: calc( 83.33333% - 1rem); }

.c-grid2 > .c-grid2__item11 { width: calc( 91.66667% - 1rem); }

.c-grid2 > .c-grid2__item12 { width: calc( 100% - 1rem); }

.c-grid2 > .c-grid2__item5col { width: calc( 20% - 1rem); }

.c-grid2--vertical > [class*="c-grid2__item"], .c-grid2--vertical > .c-grid2__item5col { display: flex; align-items: center; }

@media screen and (max-width: 736px) { .c-grid2 { margin-right: -0.75rem; margin-top: -0.75rem; }
  .c-grid2 > [class*="c-grid2__item"], .c-grid2 > .c-grid2__item5col { margin-right: 0.75rem; margin-top: 0.75rem; }
  .c-grid2 > .c-grid2__item1 { width: calc( 8.33333% - 0.75rem); }
  .c-grid2 > .c-grid2__item2 { width: calc( 16.66667% - 0.75rem); }
  .c-grid2 > .c-grid2__item3 { width: calc( 25% - 0.75rem); }
  .c-grid2 > .c-grid2__item4 { width: calc( 33.33333% - 0.75rem); }
  .c-grid2 > .c-grid2__item5 { width: calc( 41.66667% - 0.75rem); }
  .c-grid2 > .c-grid2__item6 { width: calc( 50% - 0.75rem); }
  .c-grid2 > .c-grid2__item7 { width: calc( 58.33333% - 0.75rem); }
  .c-grid2 > .c-grid2__item8 { width: calc( 66.66667% - 0.75rem); }
  .c-grid2 > .c-grid2__item9 { width: calc( 75% - 0.75rem); }
  .c-grid2 > .c-grid2__item10 { width: calc( 83.33333% - 0.75rem); }
  .c-grid2 > .c-grid2__item11 { width: calc( 91.66667% - 0.75rem); }
  .c-grid2 > .c-grid2__item12 { width: calc( 100% - 0.75rem); }
  .c-grid2 > .c-grid2__item5col { width: calc( 20% - 0.75rem); }
  .c-grid2 > .sp-item1 { width: calc( 8.33333% - 0.75rem); }
  .c-grid2 > .sp-item2 { width: calc( 16.66667% - 0.75rem); }
  .c-grid2 > .sp-item3 { width: calc( 25% - 0.75rem); }
  .c-grid2 > .sp-item4 { width: calc( 33.33333% - 0.75rem); }
  .c-grid2 > .sp-item5 { width: calc( 41.66667% - 0.75rem); }
  .c-grid2 > .sp-item6 { width: calc( 50% - 0.75rem); }
  .c-grid2 > .sp-item7 { width: calc( 58.33333% - 0.75rem); }
  .c-grid2 > .sp-item8 { width: calc( 66.66667% - 0.75rem); }
  .c-grid2 > .sp-item9 { width: calc( 75% - 0.75rem); }
  .c-grid2 > .sp-item10 { width: calc( 83.33333% - 0.75rem); }
  .c-grid2 > .sp-item11 { width: calc( 91.66667% - 0.75rem); }
  .c-grid2 > .sp-item12 { width: calc( 100% - 0.75rem); }
  .c-grid2 > .sp-item5col { width: calc( 20% - 0.75rem); } }

.c-grid2--2s { margin-right: -0.5rem; margin-top: -0.5rem; }

.c-grid2--2s > [class*="c-grid2__item"], .c-grid2--2s > .c-grid2__item5col { margin-right: 0.5rem; margin-top: 0.5rem; }

.c-grid2--2s > .c-grid2__item1 { width: calc( 8.33333% - 0.5rem); }

.c-grid2--2s > .c-grid2__item2 { width: calc( 16.66667% - 0.5rem); }

.c-grid2--2s > .c-grid2__item3 { width: calc( 25% - 0.5rem); }

.c-grid2--2s > .c-grid2__item4 { width: calc( 33.33333% - 0.5rem); }

.c-grid2--2s > .c-grid2__item5 { width: calc( 41.66667% - 0.5rem); }

.c-grid2--2s > .c-grid2__item6 { width: calc( 50% - 0.5rem); }

.c-grid2--2s > .c-grid2__item7 { width: calc( 58.33333% - 0.5rem); }

.c-grid2--2s > .c-grid2__item8 { width: calc( 66.66667% - 0.5rem); }

.c-grid2--2s > .c-grid2__item9 { width: calc( 75% - 0.5rem); }

.c-grid2--2s > .c-grid2__item10 { width: calc( 83.33333% - 0.5rem); }

.c-grid2--2s > .c-grid2__item11 { width: calc( 91.66667% - 0.5rem); }

.c-grid2--2s > .c-grid2__item12 { width: calc( 100% - 0.5rem); }

.c-grid2--2s > .c-grid2__item5col { width: calc( 20% - 0.5rem); }

@media screen and (max-width: 736px) { .c-grid2--2s { margin-right: -0.375rem; margin-top: -0.375rem; }
  .c-grid2--2s > [class*="c-grid2__item"], .c-grid2--2s > .c-grid2__item5col { margin-right: 0.375rem; margin-top: 0.375rem; }
  .c-grid2--2s > .c-grid2__item1 { width: calc( 8.33333% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item2 { width: calc( 16.66667% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item3 { width: calc( 25% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item4 { width: calc( 33.33333% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item5 { width: calc( 41.66667% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item6 { width: calc( 50% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item7 { width: calc( 58.33333% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item8 { width: calc( 66.66667% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item9 { width: calc( 75% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item10 { width: calc( 83.33333% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item11 { width: calc( 91.66667% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item12 { width: calc( 100% - 0.375rem); }
  .c-grid2--2s > .c-grid2__item5col { width: calc( 20% - 0.375rem); }
  .c-grid2--2s > .sp-item1 { width: calc( 8.33333% - 0.375rem); }
  .c-grid2--2s > .sp-item2 { width: calc( 16.66667% - 0.375rem); }
  .c-grid2--2s > .sp-item3 { width: calc( 25% - 0.375rem); }
  .c-grid2--2s > .sp-item4 { width: calc( 33.33333% - 0.375rem); }
  .c-grid2--2s > .sp-item5 { width: calc( 41.66667% - 0.375rem); }
  .c-grid2--2s > .sp-item6 { width: calc( 50% - 0.375rem); }
  .c-grid2--2s > .sp-item7 { width: calc( 58.33333% - 0.375rem); }
  .c-grid2--2s > .sp-item8 { width: calc( 66.66667% - 0.375rem); }
  .c-grid2--2s > .sp-item9 { width: calc( 75% - 0.375rem); }
  .c-grid2--2s > .sp-item10 { width: calc( 83.33333% - 0.375rem); }
  .c-grid2--2s > .sp-item11 { width: calc( 91.66667% - 0.375rem); }
  .c-grid2--2s > .sp-item12 { width: calc( 100% - 0.375rem); }
  .c-grid2--2s > .sp-item5col { width: calc( 20% - 0.375rem); } }

.c-grid2--2x { margin-right: -2rem; margin-top: -2rem; }

.c-grid2--2x > [class*="c-grid2__item"], .c-grid2--2x > .c-grid2__item5col { margin-right: 2rem; margin-top: 2rem; }

.c-grid2--2x > .c-grid2__item1 { width: calc( 8.33333% - 2rem); }

.c-grid2--2x > .c-grid2__item2 { width: calc( 16.66667% - 2rem); }

.c-grid2--2x > .c-grid2__item3 { width: calc( 25% - 2rem); }

.c-grid2--2x > .c-grid2__item4 { width: calc( 33.33333% - 2rem); }

.c-grid2--2x > .c-grid2__item5 { width: calc( 41.66667% - 2rem); }

.c-grid2--2x > .c-grid2__item6 { width: calc( 50% - 2rem); }

.c-grid2--2x > .c-grid2__item7 { width: calc( 58.33333% - 2rem); }

.c-grid2--2x > .c-grid2__item8 { width: calc( 66.66667% - 2rem); }

.c-grid2--2x > .c-grid2__item9 { width: calc( 75% - 2rem); }

.c-grid2--2x > .c-grid2__item10 { width: calc( 83.33333% - 2rem); }

.c-grid2--2x > .c-grid2__item11 { width: calc( 91.66667% - 2rem); }

.c-grid2--2x > .c-grid2__item12 { width: calc( 100% - 2rem); }

.c-grid2--2x > .c-grid2__item5col { width: calc( 20% - 2rem); }

@media screen and (max-width: 736px) { .c-grid2--2x { margin-right: -1.5rem; margin-top: -1.5rem; }
  .c-grid2--2x > [class*="c-grid2__item"], .c-grid2--2x > .c-grid2__item5col { margin-right: 1.5rem; margin-top: 1.5rem; }
  .c-grid2--2x > .c-grid2__item1 { width: calc( 8.33333% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item2 { width: calc( 16.66667% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item3 { width: calc( 25% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item4 { width: calc( 33.33333% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item5 { width: calc( 41.66667% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item6 { width: calc( 50% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item7 { width: calc( 58.33333% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item8 { width: calc( 66.66667% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item9 { width: calc( 75% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item10 { width: calc( 83.33333% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item11 { width: calc( 91.66667% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item12 { width: calc( 100% - 1.5rem); }
  .c-grid2--2x > .c-grid2__item5col { width: calc( 20% - 1.5rem); }
  .c-grid2--2x > .sp-item1 { width: calc( 8.33333% - 1.5rem); }
  .c-grid2--2x > .sp-item2 { width: calc( 16.66667% - 1.5rem); }
  .c-grid2--2x > .sp-item3 { width: calc( 25% - 1.5rem); }
  .c-grid2--2x > .sp-item4 { width: calc( 33.33333% - 1.5rem); }
  .c-grid2--2x > .sp-item5 { width: calc( 41.66667% - 1.5rem); }
  .c-grid2--2x > .sp-item6 { width: calc( 50% - 1.5rem); }
  .c-grid2--2x > .sp-item7 { width: calc( 58.33333% - 1.5rem); }
  .c-grid2--2x > .sp-item8 { width: calc( 66.66667% - 1.5rem); }
  .c-grid2--2x > .sp-item9 { width: calc( 75% - 1.5rem); }
  .c-grid2--2x > .sp-item10 { width: calc( 83.33333% - 1.5rem); }
  .c-grid2--2x > .sp-item11 { width: calc( 91.66667% - 1.5rem); }
  .c-grid2--2x > .sp-item12 { width: calc( 100% - 1.5rem); }
  .c-grid2--2x > .sp-item5col { width: calc( 20% - 1.5rem); } }

@media screen and (max-width: 736px) { .c-grid2.sp-2s { margin-right: -0.375rem; margin-top: -0.375rem; }
  .c-grid2.sp-2s > [class*="c-grid2__item"], .c-grid2.sp-2s > .c-grid2__item5col { margin-right: 0.375rem; margin-top: 0.375rem; }
  .c-grid2.sp-2s > .c-grid2__item1 { width: calc( 8.33333% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item2 { width: calc( 16.66667% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item3 { width: calc( 25% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item4 { width: calc( 33.33333% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item5 { width: calc( 41.66667% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item6 { width: calc( 50% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item7 { width: calc( 58.33333% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item8 { width: calc( 66.66667% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item9 { width: calc( 75% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item10 { width: calc( 83.33333% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item11 { width: calc( 91.66667% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item12 { width: calc( 100% - 0.375rem); }
  .c-grid2.sp-2s > .c-grid2__item5col { width: calc( 20% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item1 { width: calc( 8.33333% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item2 { width: calc( 16.66667% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item3 { width: calc( 25% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item4 { width: calc( 33.33333% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item5 { width: calc( 41.66667% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item6 { width: calc( 50% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item7 { width: calc( 58.33333% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item8 { width: calc( 66.66667% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item9 { width: calc( 75% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item10 { width: calc( 83.33333% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item11 { width: calc( 91.66667% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item12 { width: calc( 100% - 0.375rem); }
  .c-grid2.sp-2s > .sp-item5col { width: calc( 20% - 0.375rem); } }

@media screen and (max-width: 736px) { .c-grid2.sp-2x { margin-right: -1.5rem; margin-top: -1.5rem; }
  .c-grid2.sp-2x > [class*="c-grid2__item"], .c-grid2.sp-2x > .c-grid2__item5col { margin-right: 1.5rem; margin-top: 1.5rem; }
  .c-grid2.sp-2x > .c-grid2__item1 { width: calc( 8.33333% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item2 { width: calc( 16.66667% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item3 { width: calc( 25% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item4 { width: calc( 33.33333% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item5 { width: calc( 41.66667% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item6 { width: calc( 50% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item7 { width: calc( 58.33333% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item8 { width: calc( 66.66667% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item9 { width: calc( 75% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item10 { width: calc( 83.33333% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item11 { width: calc( 91.66667% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item12 { width: calc( 100% - 1.5rem); }
  .c-grid2.sp-2x > .c-grid2__item5col { width: calc( 20% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item1 { width: calc( 8.33333% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item2 { width: calc( 16.66667% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item3 { width: calc( 25% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item4 { width: calc( 33.33333% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item5 { width: calc( 41.66667% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item6 { width: calc( 50% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item7 { width: calc( 58.33333% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item8 { width: calc( 66.66667% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item9 { width: calc( 75% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item10 { width: calc( 83.33333% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item11 { width: calc( 91.66667% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item12 { width: calc( 100% - 1.5rem); }
  .c-grid2.sp-2x > .sp-item5col { width: calc( 20% - 1.5rem); } }

/******************************************************************
component - gutter
******************************************************************/
.c-gutter > *:not(:last-child) { margin-bottom: 1rem; }

.c-gutter-2l > *:not(:last-child) { margin-bottom: 1.5rem; }

.c-gutter-2x > *:not(:last-child) { margin-bottom: 2rem; }

@media screen and (max-width: 736px) { .c-gutter > *:not(:last-child) { margin-bottom: 0.75rem; }
  .c-gutter-2l > *:not(:last-child) { margin-bottom: 1.125rem; }
  .c-gutter-2x > *:not(:last-child) { margin-bottom: 1.5rem; }
  .c-sp-gutter > *:not(:last-child) { margin-bottom: 0.75rem; }
  .c-sp-gutter-2l > *:not(:last-child) { margin-bottom: 1.125rem; }
  .c-sp-gutter-2x > *:not(:last-child) { margin-bottom: 1.5rem; } }

/******************************************************************
component - text-row2
******************************************************************/
.c-text-row2 { display: flex; }

.c-text-row2--inline { display: inline-flex; }

.c-text-row2--vertical { align-items: center; }

.c-text-row2 > .c-text-row2__head-left, .c-text-row2 > .c-text-row2__head-right { box-sizing: border-box; flex-shrink: 0; }

.c-text-row2 > .c-text-row2__head-left { margin-right: 1rem; order: 1; }

.c-text-row2 > .c-text-row2__head-right { margin-left: 1rem; order: 2; }

.c-text-row2 > .c-text-row2__body-right, .c-text-row2 > .c-text-row2__body-left { box-sizing: border-box; flex-grow: 1; }

.c-text-row2 > .c-text-row2__body-right { order: 2; }

.c-text-row2 > .c-text-row2__body-left { order: 1; }

@media screen and (max-width: 736px) { .c-text-row2 > .c-text-row2__head-left { margin-right: 0.75rem; }
  .c-text-row2 > .c-text-row2__head-right { margin-left: 0.75rem; }
  .c-text-row2.sp-column { flex-direction: column; }
  .c-text-row2.sp-column--center { align-items: flex-start; }
  .c-text-row2.sp-column > .c-text-row2__head-left, .c-text-row2.sp-column > .c-text-row2__head-right { order: 1; margin-bottom: 0.75rem; margin-right: 0; margin-left: 0; text-align: center; width: 100%; max-width: none; }
  .c-text-row2.sp-column > .c-text-row2__body-right, .c-text-row2.sp-column > .c-text-row2__body-left { order: 2; width: 100%; }
  .c-text-row2.sp-column.sp-column-reverse > .c-text-row2__head-left, .c-text-row2.sp-column.sp-column-reverse > .c-text-row2__head-right { order: 2; margin-top: 0.75rem; margin-bottom: 0; }
  .c-text-row2.sp-column.sp-column-reverse > .c-text-row2__body-right, .c-text-row2.sp-column.sp-column-reverse > .c-text-row2__body-left { order: 1; } }

.c-text-row2--2x > .c-text-row2__head-left { margin-right: 2rem; }

.c-text-row2--2x > .c-text-row2__head-right { margin-left: 2rem; }

@media screen and (max-width: 736px) { .c-text-row2--2x > .c-text-row2__head-left { margin-right: 1.5rem; }
  .c-text-row2--2x > .c-text-row2__head-right { margin-left: 1.5rem; }
  .c-text-row2--2x.sp-column > .c-text-row2__head-left, .c-text-row2--2x.sp-column > .c-text-row2__head-right { margin-bottom: 1.5rem; }
  .c-text-row2--2x.sp-column.sp-column-reverse > .c-text-row2__head-left, .c-text-row2--2x.sp-column.sp-column-reverse > .c-text-row2__head-right { margin-top: 1.5rem; } }

@media screen and (max-width: 736px) { .c-text-row2.sp-2x > .c-text-row2__head-left { margin-right: 1.5rem; }
  .c-text-row2.sp-2x > .c-text-row2__head-right { margin-left: 1.5rem; }
  .c-text-row2.sp-2x.sp-column > .c-text-row2__head-left, .c-text-row2.sp-2x.sp-column > .c-text-row2__head-right { margin-bottom: 1.5rem; margin-right: 0; margin-left: 0; }
  .c-text-row2.sp-2x.sp-column.sp-column-reverse > .c-text-row2__head-left, .c-text-row2.sp-2x.sp-column.sp-column-reverse > .c-text-row2__head-right { margin-top: 1.5rem; } }

/******************************************************************
component - text-around2
******************************************************************/
.c-text-around2::after { content: ""; display: block; clear: both; }

.c-text-around2 > .c-text-around2__image--left, .c-text-around2 > .c-text-around2__image--right { display: block; margin-bottom: 1rem; }

.c-text-around2 > .c-text-around2__image--left { float: left; margin-right: 1rem; }

.c-text-around2 > .c-text-around2__image--right { float: right; margin-left: 1rem; }

@media screen and (max-width: 736px) { .c-text-around2 > .c-text-around2__image--left, .c-text-around2 > .c-text-around2__image--right { margin-bottom: 0.75rem; }
  .c-text-around2 > .c-text-around2__image--left { margin-right: 0.75rem; }
  .c-text-around2 > .c-text-around2__image--right { margin-left: 0.75rem; }
  .c-text-around2.sp-column > .c-text-around2__image--left, .c-text-around2.sp-column > .c-text-around2__image--right { float: none; margin-bottom: 0.75rem; margin-right: 0; margin-left: 0; text-align: center; width: 100%; max-width: none; } }

.c-text-around2--2x > .c-text-around2__image--left, .c-text-around2--2x > .c-text-around2__image--right { margin-bottom: 2rem; }

.c-text-around2--2x > .c-text-around2__image--left { margin-right: 2rem; }

.c-text-around2--2x > .c-text-around2__image--right { margin-left: 2rem; }

@media screen and (max-width: 736px) { .c-text-around2--2x > .c-text-around2__image--left, .c-text-around2--2x > .c-text-around2__image--right { margin-bottom: 1.5rem; }
  .c-text-around2--2x > .c-text-around2__image--left { margin-right: 1.5rem; }
  .c-text-around2--2x > .c-text-around2__image--right { margin-left: 1.5rem; }
  .c-text-around2--2x.sp-column > .c-text-around2__image--left, .c-text-around2--2x.sp-column > .c-text-around2__image--right { margin-bottom: 1.5rem; margin-right: 0; margin-left: 0; } }

@media screen and (max-width: 736px) { .c-text-around2.sp-2x > .c-text-around2__image--left, .c-text-around2.sp-2x > .c-text-around2__image--right { margin-bottom: 1.5rem; }
  .c-text-around2.sp-2x > .c-text-around2__image--left { margin-right: 1.5rem; }
  .c-text-around2.sp-2x > .c-text-around2__image--right { margin-left: 1.5rem; }
  .c-text-around2.sp-2x.sp-column > .c-text-around2__image--left, .c-text-around2.sp-2x.sp-column > .c-text-around2__image--right { margin-bottom: 1.5rem; margin-right: 0; margin-left: 0; } }

/******************************************************************
component - image
******************************************************************/
.js-image-size-sync a { display: block; color: inherit; text-decoration: none; }

.js-image-size-sync a:hover { color: inherit; text-decoration: none; }

.js-image-size-sync.c-image--center a { margin-right: auto; margin-left: auto; }

.js-image-size-sync.c-image--right a { margin-left: auto; }

.c-image--center { text-align: center; }

.c-image--right { text-align: right; }

.c-image__title { display: block; text-align: left; line-height: 1.5; font-weight: bold; font-size: 1.08rem; line-height: 1.6; }

@media screen and (max-width: 736px) { .c-image__title { font-size: 0.9rem; } }

.c-image--center .c-image__title { margin-right: auto; margin-left: auto; }

.c-image--right .c-image__title { margin-left: auto; }

.c-image__title:first-child { margin-bottom: 0.5rem; }

@media screen and (max-width: 736px) { .c-image__title:first-child { margin-bottom: 0.375rem; } }

.c-image__title:last-child { margin-top: 0.5rem; }

@media screen and (max-width: 736px) { .c-image__title:last-child { margin-top: 0.375rem; } }

.c-image__caption { display: block; text-align: left; line-height: 1.5; }

.c-image--center .c-image__caption { margin-right: auto; margin-left: auto; }

.c-image--right .c-image__caption { margin-left: auto; }

.c-image__caption:first-child { margin-bottom: 0.5rem; }

@media screen and (max-width: 736px) { .c-image__caption:first-child { margin-bottom: 0.375rem; } }

.c-image__caption:last-child { margin-top: 0.5rem; }

@media screen and (max-width: 736px) { .c-image__caption:last-child { margin-top: 0.375rem; } }

/******************************************************************
component - c-image-youtube
******************************************************************/
.c-image-youtube { position: relative; display: inline-block; max-width: 100%; }

.c-image-youtube__main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/playlist_mov.png); background-repeat: no-repeat; background-position: center center; }

@media screen and (max-width: 736px) { .c-image-youtube__main { background-size: 60px 60px; } }

.c-image-youtube--under .c-image-youtube__main { background-position: right 14px bottom 14px; }

/******************************************************************
project - bnr
******************************************************************/
.p-bnr { background-color: #ffcc00; }

/******************************************************************
project - plan
******************************************************************/
.p-plan { background: linear-gradient(-45deg, #feeeb3 25%, #fee58c 25%, #fee58c 50%, #feeeb3 50%, #feeeb3 75%, #fee58c 75%, #fee58c); background-size: 40px 40px; }

.p-plan-title { text-align: center; }

@media screen and (max-width: 736px) { .p-plan-title { padding-top: 10px; }
  .p-plan-title img { max-width: 65%; } }

.p-plan-copy { text-align: center; font-size: 20px; font-weight: bold; line-height: 2; }

@media screen and (max-width: 736px) { .p-plan-copy { font-size: 16px; } }

.p-plan-btn { text-align: center; }

@media screen and (max-width: 736px) { .p-plan-btn img { max-width: 80%; } }

/******************************************************************
project - playlist
******************************************************************/
.p-playlist-copy { font-weight: bold; font-size: 24px; line-height: 1.8; color: #49a233; }

@media screen and (max-width: 736px) { .p-playlist-copy { font-size: 16px; } }

/******************************************************************
project - playlist-main
******************************************************************/
.p-playlist-main { background-color: #fff; border: 2px solid #66af54; }

.p-playlist-main__title { background-color: #66af54; color: #fff; text-align: center; padding: 1.5rem; font-size: 26px; }

@media screen and (max-width: 736px) { .p-playlist-main__title { font-size: 18px; padding: 1rem; } }

.p-playlist-main__main { padding: 1.5rem; font-size: 16px; }

@media screen and (max-width: 736px) { .p-playlist-main__main { padding: 1rem; } }

.p-playlist-main__img { padding-left: 16px; }

@media screen and (max-width: 736px) { .p-playlist-main__img { padding-left: 0; } }

.p-playlist-main__copy { text-align: center; font-weight: bold; font-size: 21px; line-height: 2; }

@media screen and (max-width: 736px) { .p-playlist-main__copy { font-size: 16px; } }

.p-playlist-main__use { border: 2px solid #d4e77d; background-color: #efffa8; padding: 1rem; font-weight: bold; }

.p-playlist-main__use h3 { color: #66af54; font-weight: bold; }

@media screen and (max-width: 736px) { .p-playlist-main__use { padding: 0.75rem; } }

@media print, screen and (min-width: 737px) { .p-playlist-main__number { display: table; width: 100%; } }

@media print, screen and (min-width: 737px) { .p-playlist-main__number-left { display: table-cell; } }

@media screen and (max-width: 736px) { .p-playlist-main__number-left { margin-bottom: 6px; } }

.p-playlist-main__number-left-in { display: inline-block; border: 2px solid #ff9000; background-color: #fff8ba; padding: 5px 8px; font-weight: bold; line-height: 1.3; white-space: nowrap; }

@media screen and (max-width: 736px) { .p-playlist-main__number-left-in { font-size: 14px; } }

.p-playlist-main__number-left-in strong { padding-left: 5px; color: #ff9000; font-size: 22px; vertical-align: -2px; }

@media screen and (max-width: 736px) { .p-playlist-main__number-left-in strong { font-size: 20px; } }

@media print, screen and (min-width: 737px) { .p-playlist-main__number-right { display: table-cell; padding-left: 1em; text-align: right; font-size: 15px; } }

@media screen and (max-width: 736px) { .p-playlist-main__number-right { font-size: 13px; } }

.p-playlist-main__subtitle { font-weight: bold; color: #ff9000; font-size: 26px; padding: 0.8rem 1.8rem; border-radius: 6px; background: linear-gradient(#fee19f 25%, #ffefd3 25%, #ffefd3 50%, #fee19f 50%, #fee19f 75%, #ffefd3 75%, #ffefd3); background-size: 8px 8px; }

@media screen and (max-width: 736px) { .p-playlist-main__subtitle { font-size: 18px; padding: 0.6rem 0.75rem; } }

.p-playlist-main__block { padding-bottom: 1rem; }

.p-playlist-main__block > *.dot-top { position: relative; margin-top: 65px; }

.p-playlist-main__block > *.dot-top::before { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: -65px; right: 0; left: 0; height: 65px; background: url(../img/playlist_dot.png) left center repeat-x; }

@media screen and (max-width: 736px) { .p-playlist-main__block > *.dot-top { margin-top: 45px; }
  .p-playlist-main__block > *.dot-top::before { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: -45px; right: 0; left: 0; height: 45px; background: url(../img/playlist_dot.png) left center repeat-x; } }

.p-playlist-main__block > *:not(:last-child) { position: relative; margin-bottom: 65px; }

.p-playlist-main__block > *:not(:last-child)::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; right: 0; bottom: -65px; left: 0; height: 65px; background: url(../img/playlist_dot.png) left center repeat-x; }

@media screen and (max-width: 736px) { .p-playlist-main__block > *:not(:last-child) { margin-bottom: 45px; }
  .p-playlist-main__block > *:not(:last-child)::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; right: 0; bottom: -45px; left: 0; height: 45px; background: url(../img/playlist_dot.png) left center repeat-x; } }

.p-playlist-main__block-title { color: #66af54; font-size: 26px; font-weight: bold; margin-bottom: 0.4em; }

@media screen and (max-width: 736px) { .p-playlist-main__block-title { font-size: 18px; margin-bottom: 0.6em; } }

@media print, screen and (min-width: 737px) { .p-playlist-main__block-dl { display: table; } }

@media print, screen and (min-width: 737px) { .p-playlist-main__block-dl dt { display: table-cell; width: 5em; vertical-align: middle; } }

.p-playlist-main__block-dl dt span { width: 5em; display: block; background-color: #ffe400; border: 2px solid #000; border-radius: 4px; text-align: center; font-weight: bold; padding: 0.4em 0.2em; }

@media screen and (max-width: 736px) { .p-playlist-main__block-dl dt span { padding: 0.2em 0.2em; font-size: 14px; } }

.p-playlist-main__block-dl dd { box-sizing: border-box; }

@media print, screen and (min-width: 737px) { .p-playlist-main__block-dl dd { display: table-cell; vertical-align: middle; width: calc(100% - 5em); padding-left: 0.5em; font-size: 16px; } }

@media screen and (max-width: 736px) { .p-playlist-main__block-dl dd { padding-top: 0.3em; font-size: 14px; } }

.p-playlist-main__block-dl dd strong { font-size: 18px; }

@media screen and (max-width: 736px) { .p-playlist-main__block-dl dd strong { font-size: 16px; display: block; } }

/******************************************************************
project - playlist-link
******************************************************************/
.p-playlist-link { background-color: #fff; border-radius: 6px; box-shadow: 3px 3px 0px 1px #226e0b; padding: 2rem; font-size: 18px; }

@media screen and (max-width: 736px) { .p-playlist-link { padding: 1.125rem; font-size: 16px; } }

.p-playlist-link__title { text-align: center; font-size: 18px; }

@media screen and (max-width: 736px) { .p-playlist-link__title { font-size: 16px; } }

.p-playlist-link__title img { margin-top: 0.5em; }

.p-playlist-link__btn { text-align: center; }

.p-playlist-link__btn a { display: inline-block; text-align: center; cursor: pointer; vertical-align: middle; box-sizing: border-box; border: 1px solid transparent; line-height: 1.5; background-color: #ff8b2e; color: #fff; font-weight: bold; padding: 0.2em 0.6em; border-radius: 6px; transition-property: background; transition-duration: 0.3s; }

.p-playlist-link__btn a:hover { text-decoration: none; background-color: #ff7d15; }

/******************************************************************
project - primary
******************************************************************/
.p-primary-copy { font-weight: bold; font-size: 21px; line-height: 2; }

@media screen and (max-width: 736px) { .p-primary-copy { font-size: 16px; } }

.p-primary-block__item { position: relative; background-color: #fff; border: 3px solid #ff9000; text-align: center; font-weight: bold; font-size: 20px; line-height: 2; padding: 1.3rem 15%; }

@media screen and (max-width: 736px) { .p-primary-block__item { padding: 3rem 1rem 1rem 1rem; font-size: 15px; } }

.p-primary-block__item:not(:last-child) { margin-bottom: 80px; }

.p-primary-block__item:not(:last-child)::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; right: 0; bottom: -80px; left: 0; height: 80px; background: url(../img/primary_arrow.png) center center no-repeat; }

@media screen and (max-width: 736px) { .p-primary-block__item:not(:last-child) { margin-bottom: 40px; }
  .p-primary-block__item:not(:last-child)::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; right: 0; bottom: -40px; left: 0; height: 40px; background: url(../img/primary_arrow.png) center center/auto 30px no-repeat; } }

.p-primary-block__item:nth-child(1) { background: #fff url(../img/primary_step1.png) left 20px top 1px no-repeat; }

.p-primary-block__item:nth-child(2) { background: #fff url(../img/primary_step2.png) left 20px top 1px no-repeat; }

.p-primary-block__item:nth-child(3) { background: #fff url(../img/primary_step3.png) left 20px top 1px no-repeat; }

.p-primary-block__item:nth-child(4) { background: #fff url(../img/primary_step4.png) left 20px top 1px no-repeat; }

.p-primary-block__item:nth-child(5) { background: #fff url(../img/primary_step5.png) left 20px top 1px no-repeat; }

.p-primary-block__item:nth-child(6) { background: #fff url(../img/primary_step6.png) left 20px top 1px no-repeat; }

@media screen and (max-width: 736px) { .p-primary-block__item { background-size: 20px auto !important; background-position: center top 10px !important; } }

.p-primary-block strong { display: block; padding-bottom: 1rem; }

@media screen and (max-width: 736px) { .p-primary-block strong { padding-bottom: 0.75rem; color: #ff9000; font-weight: bold; font-size: 20px; } }

/******************************************************************
project - junior
******************************************************************/
.p-junior-copy { font-weight: bold; font-size: 24px; line-height: 2; }

.p-junior-copy2 { font-weight: bold; font-size: 22px; line-height: 2; }

@media screen and (max-width: 736px) { .p-junior-copy2 { font-size: 16px; } }

.p-junior_title2 { margin-bottom: 0.6em; }

@media screen and (max-width: 736px) { .p-junior_title2.u-sp-media { display: block !important; margin-left: auto; margin-right: auto; } }

.p-junior-block2 { background-color: #fff; border: 3px solid #3eaae2; padding: 1.3rem; }

@media screen and (max-width: 736px) { .p-junior-block2 { padding: 1rem; } }

.p-junior-block__item { position: relative; background-color: #fff; border: 3px solid #3eaae2; text-align: center; font-weight: bold; font-size: 20px; line-height: 2; padding: 1.3rem 15%; }

@media screen and (max-width: 736px) { .p-junior-block__item { padding: 3rem 1rem 1rem 1rem; font-size: 15px; }
  .p-junior-block__item strong { line-height: 1.5; } }

.p-junior-block__item:not(:last-child) { margin-bottom: 80px; }

.p-junior-block__item:not(:last-child)::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; right: 0; bottom: -80px; left: 0; height: 80px; background: url(../img/junior-arrow.png) center center no-repeat; }

@media screen and (max-width: 736px) { .p-junior-block__item:not(:last-child) { margin-bottom: 40px; }
  .p-junior-block__item:not(:last-child)::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; right: 0; bottom: -40px; left: 0; height: 40px; background: url(../img/junior-arrow.png) center center/auto 30px no-repeat; } }

.p-junior-block__item:nth-child(1) { background: #fff url(../img/primary_step1.png) left 20px top 1px no-repeat; }

.p-junior-block__item:nth-child(2) { background: #fff url(../img/primary_step2.png) left 20px top 1px no-repeat; }

.p-junior-block__item:nth-child(3) { background: #fff url(../img/primary_step3.png) left 20px top 1px no-repeat; }

.p-junior-block__item:nth-child(4) { background: #fff url(../img/primary_step4.png) left 20px top 1px no-repeat; }

.p-junior-block__item:nth-child(5) { background: #fff url(../img/primary_step5.png) left 20px top 1px no-repeat; }

.p-junior-block__item:nth-child(6) { background: #fff url(../img/primary_step6.png) left 20px top 1px no-repeat; }

@media screen and (max-width: 736px) { .p-junior-block__item { background-size: 20px auto !important; background-position: center top 10px !important; } }

.p-junior-block strong { display: block; padding-bottom: 1rem; }

@media screen and (max-width: 736px) { .p-junior-block strong { padding-bottom: 0.75rem; color: #3eaae2; font-weight: bold; font-size: 20px; } }

/******************************************************************
project - infant
******************************************************************/
.p-infant-copy { font-weight: bold; font-size: 24px; line-height: 2; }

.p-infant-copy2 { font-weight: bold; font-size: 22px; line-height: 2; }

@media screen and (max-width: 736px) { .p-infant-copy2 { font-size: 16px; } }

.p-infant_title2 { margin-bottom: 0.6em; }

.p-infant-block { background-color: #fff; border: 3px solid #ff76a0; padding: 0.5rem; }

@media screen and (max-width: 736px) { .p-infant-block { padding: 1rem; } }

.p-infant-block__title { color: #ff76a0; font-weight: bold; font-size: 26px; }

.p-infant-block__title img { margin-right: 0.8em; }

@media screen and (max-width: 736px) { .p-infant-block__title { font-size: 20px; line-height: 1.6; }
  .p-infant-block__title img { margin-right: 0.4em; width: 60px; } }

.p-infant-block2 { background-color: #fff; border: 3px solid #ff76a0; padding: 1rem; text-align: center; }

.p-infant-block2__title { color: #ff76a0; font-weight: bold; font-size: 28px; }

@media screen and (max-width: 736px) { .p-infant-block2__title { font-size: 18px; } }

.p-infant-block2__note { font-weight: bold; font-size: 18px; }

@media screen and (max-width: 736px) { .p-infant-block2__note { font-size: 14px; } }

/******************************************************************
project - breadcrumb
******************************************************************/
.p-breadcrumb::after { content: ""; display: block; clear: both; }

.p-breadcrumb__item { float: left; padding-right: 0.5em; font-size: 85%; }

.p-breadcrumb__item a { color: inherit; }

.p-breadcrumb__item:not(:last-child)::after { content: '>'; padding-left: 0.5em; }

/******************************************************************
utility - mediaQuery
******************************************************************/
.u-sp-media { display: none; }

@media screen and (max-width: 736px) { .u-pc-media { display: none; }
  .u-sp-media { display: block; }
  img.u-sp-media { display: inline-block; } }

/******************************************************************
utility - display
******************************************************************/
.u-block { display: block; }

.u-none { display: none; }

.u-inline { display: inline; }

.u-inline-block { display: inline-block; }

.u-table { display: table; }

.u-table-row { display: table-row; }

.u-table-cell { display: table-cell; }

.u-flex { display: flex; }

.u-inline-flex { display: inline-flex; }

@media screen and (max-width: 736px) { .u-sp-block { display: block; }
  .u-sp-none { display: none; }
  .u-sp-inline { display: inline; }
  .u-sp-inline-block { display: inline-block; }
  .u-sp-table { display: table; }
  .u-sp-table-row { display: table-row; }
  .u-sp-table-cell { display: table-cell; }
  .u-sp-flex { display: flex; }
  .u-sp-inline-flex { display: inline-flex; } }

/******************************************************************
utility - display-off
******************************************************************/
.u-display-off { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; overflow: hidden; padding: 0; clip: rect(0, 0, 0, 0); }

@media screen and (max-width: 736px) { .u-sp-display-off { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; overflow: hidden; padding: 0; clip: rect(0, 0, 0, 0); } }

/******************************************************************
utility - margin-top
******************************************************************/
.u-margin-top { margin-top: 1rem; }

.u-margin-top-3x { margin-top: 3rem; }

@media screen and (max-width: 736px) { .u-margin-top { margin-top: 0.75rem; }
  .u-margin-top-3x { margin-top: 2.25rem; }
  .u-sp-margin-top { margin-top: 0.75rem; }
  .u-sp-margin-top-3x { margin-top: 2.25rem; } }

/******************************************************************
utility - text-align
******************************************************************/
.u-center { text-align: center; }

.u-right { text-align: right; }

.u-left { text-align: left; }

@media screen and (max-width: 736px) { .u-sp-center { text-align: center; }
  .u-sp-right { text-align: right; }
  .u-sp-left { text-align: left; } }

/******************************************************************
utility - over-opacity
******************************************************************/
.u-over-opacity { transition-property: opacity; transition-duration: 0.3s; }

.u-over-opacity:hover { opacity: 0.7; }