@charset "utf-8";

.mainVisual          { position: relative; background: #f5efed; color: #614304; font-family: 'Noto Sans JP', sans-serif; font-size: 1.6rem; font-weight: 400; }
.mainVisual:after    { content: ""; display: block; clear: both; height: 0; }
.mainVisual .mainL   { position: relative; float: left; width: 517px; text-align: center; }
.mainVisual .mainL p { position: absolute; top: 124px; left: 0; width: 100%; }
.mainVisual .mainR   { float: right; width: 763px; }
#mainitem01          { position: absolute; top: -36px; left: 452px; }
#mainitem02          { position: absolute; bottom: -25px; left: -51px; }

.news           { margin-top: 70px; }
.news:after     { content: ""; display: block; clear: both; height: 0; }
.news h2        { float: left; width: 130px; margin-top: -9px; color: #614304; font-family: 'Noto Serif JP', serif; font-size: 2.4rem; font-weight: 400; }
.news a         { display: block; float: right; width: 1150px; margin-bottom: 5px; }
.news a:last-of-type{ margin-bottom: 0; }
.news a:after   { content: ""; display: block; clear: both; height: 0; }
.news a time    { float: left; width: 95px; }
.news a p       { float: right; width: 1055px; text-decoration: underline; }
.news a:hover p { text-decoration: none; }

.weather                      { margin-top: 80px; }
.weather ul:after             { content: ""; display: block; clear: both; height: 0; }
.weather li                   { float: left; width: 626px; margin: 20px 28px 0 0; background: #f5efed; }
.weather li:nth-child(1),
.weather li:nth-child(2)      { margin-top: 0; }
.weather li:nth-child(2n)     { margin-right: 0; }
.weather li a                 { display: table; width: 100%; }
.weather li i                 { display: block; }
.weather li figure,
.weather li .exp              { display: table-cell; vertical-align: middle; }
.weather li h3                { color: #614304; font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; }
.weather .upper li            { text-align: center; }
.weather .upper li figure     { width: 300px; }
.weather .upper li i,
.weather .upper li h3         { margin-bottom: 20px; text-align: center; }
.weather .lower               { margin-top: 20px; }
.weather .lower li a          { padding: 1px; }
.weather .lower li figure     { width: 113px; height: 113px; background: #fff; text-align: center; }
.weather .lower li figure img { width: 53px; height: auto; }
.weather .lower li .exp       { padding: 0 20px; }
.weather .lower li h3         { margin-bottom: 10px; }

.started-college                         { margin-top: 80px; }
.started-college:after                   { content: ""; display: block; clear: both; height: 0; }
.started-college > section               { float: left; width: 626px; margin: 20px 28px 0 0; text-align: center; }
.started-college > section:nth-child(1),
.started-college > section:nth-child(2)  { margin-top: 0; }
.started-college > section:nth-child(2n) { margin-right: 0; }
.started-college .box                    { background: #f5efed; }
.started-college .box a                  { display: table; width: 100%; }
.started-college .box i                  { display: block; margin-bottom: 20px; }
.started-college .box figure,
.started-college .box .exp               { display: table-cell; vertical-align: middle; }
.started-college .box figure             { width: 300px; }
.started-college .box h3                 { margin-bottom: 20px; color: #614304; font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; }

.mastery                  { margin-top: 80px; }
.mastery ul:after         { content: ""; display: block; clear: both; height: 0; }
.mastery li               { float: left; width: 626px; margin: 20px 28px 0 0; background: #f5efed; text-align: center; }
.mastery li:nth-child(1),
.mastery li:nth-child(2)  { margin-top: 0; }
.mastery li:nth-child(2n) { margin-right: 0; }
.mastery li a             { display: table; width: 100%; }
.mastery li i             { display: block; margin-bottom: 20px; }
.mastery li figure,
.mastery li .exp          { display: table-cell; vertical-align: middle; }
.mastery li figure        { width: 300px; }
.mastery li h3            { margin-bottom: 20px; color: #614304; font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; }

.pickup           { margin-top: 40px; padding: 10px; background: #f5efed; }
.pickup .innerBox { padding: 45px 48px 48px; border: 2px dashed #614304; }
.pickup ul:after  { content: ""; display: block; clear: both; height: 0; }
.pickup li        { float: left; width: 566px; margin: 20px 28px 0 0; }
.pickup li:nth-child(1),
.pickup li:nth-child(2)  { margin-top: 0; }
.pickup li:nth-child(2n) { margin-right: 0; }
.pickup a         { display: block; position: relative; width: 100%; height: 224px; }
.pickup p         { position: absolute; top: 50%; left: 50%; width: 416px; height: 106px; margin: -53px 0 0 -208px; background: rgba(255, 255, 255, .9); font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; text-align: center; line-height: 106px; }

@media (max-width: 767px) {
.mainVisual            { font-size: 1.4rem; }
.mainVisual .mainL     { float: none; width: auto; }
.mainVisual .mainL p   { top: 23%; }
.mainVisual .mainR     { float: none; width: auto; }
.mainVisual .mainL img,
.mainVisual .mainR img { width: 100%; height: auto; }
#mainitem01            { top: -23px; right: -9px; left: auto; }
#mainitem01 img        { width: 60px; height: auto; }
#mainitem02            { bottom: -28px; left: -12px; }
#mainitem02 img        { width: 104px; height: auto; }

.news           { margin-top: 45px; text-align: center; }
.news h2        { float: none; width: auto; margin: 0 0 15px; }
.news a         { float: none; width: auto; }
.news a time    { display: block; float: none; width: auto; margin-bottom: 5px; }
.news a p       { float: none; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.weather                      { margin-top: 40px; font-size: 1rem; }
.weather li                   { float: none; width: 100%; margin: 20px 0 0; }
.weather li:nth-child(2)      { margin-top: 20px; }
.weather li i img             { transform: scale(.7, .7); }
.weather li h3                { font-size: 1.4rem; }

.weather .upper li figure     { width: 50%; }
.weather .upper li figure img { width: 100%; height: auto; }
.weather .upper li i          { margin-bottom: 7px; }
.weather .upper li h3         { margin-bottom: 10px; }
.weather .lower               { margin-top: 20px; }
.weather .lower li figure     { width: 50%; height: 130px; }
.weather .lower li figure img { width: 72px; }
.weather .lower li .exp       { padding: 0 10px; text-align: center; }

.started-college                         { margin-top: 40px; font-size: 1rem; }
.started-college > section               { float: none; width: auto; margin: 40px 0 0; }
.started-college > section:nth-child(2)  { margin-top: 40px; }
.started-college .box i                  { margin-bottom: 7px; }
.started-college .box i img              { transform: scale(.7, .7); }
.started-college .box figure             { width: 50%; }
.started-college .box figure img         { width: 100%; height: auto; }
.started-college .box h3                 { margin-bottom: 10px; font-size: 1.4rem; }

.mastery                  { margin-top: 40px; font-size: 1rem; }
.mastery li               { float: none; width: auto; margin: 20px 0 0; }
.mastery li:nth-child(2)  { margin-top: 20px; }
.mastery li i             { margin-bottom: 7px; }
.mastery li i img         { transform: scale(.7, .7); }
.mastery li figure        { width: 50%; }
.mastery li figure img    { width: 100%; height: auto; }
.mastery li h3            { margin-bottom: 10px; font-size: 1.4rem; }

.pickup .innerBox { padding: 25px 20px; /*border: 2px dashed #614304;*/ }
.pickup li        { float: none; width: 100%; margin: 20px 0 0; }
.pickup li:nth-child(2)  { margin-top: 20px; }
.pickup li figure img    { width: 100%; height: auto; }
.pickup a         { height: auto; }
.pickup p         { width: calc(100% - 40px); margin: 0; transform: translate(-50%, -50%); }
}