@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:18px;
text-align:left;
color:#333;
background: url("../images/old_mathematics.png") fixed;
min-width:768px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.5vw; min-width:240px; max-width:767px;}
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{ margin:40px auto; text-align:center;}
@media screen and (max-width:767px){
figure{ margin:6% auto;}
}

p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
p{ line-height:1.5em;}
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

/*ヘッダー*/
#header{ padding:20px 0; text-align: center;}
#header h1{ text-align: center; font-size: 39px; line-height: 1.5em; margin-bottom: 20px;}
#header .date{ display: inline-block; font-size: 16px; line-height: 1em; text-align: center; padding: 0.5em 1em; background: #efefef; border:3px double #333;}
#header figure{ margin: 0 auto; padding: 20px 0;}
#header img{ max-width: 767px; padding:10px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
#header{ padding:3%;}
#header h1{ font-size:5vw; margin-bottom:3%;}
#header .date{ font-size:3vw;}
#header figure{ margin: 0 auto; padding:3% 0;}
#header img{ width: 100%; padding:1vw;}
}

/*フッター*/
#footer{ margin:0 auto; background:#efefef; padding:0; border-top: 1px solid #ccc;}
#footer ul{ letter-spacing: -1em; text-align: center; padding: 1em;}
#footer ul li{ display: inline-block; letter-spacing: 0; vertical-align: middle; margin: 0 1em; font-size: 13px;}
#footer a:hover { text-decoration: underline;}
p.copyright{ text-align:center; margin:0; padding:1em; background:#329632; color:#fff; font-size:13px; letter-spacing:0.1em;}
@media screen and (max-width:767px){
#footer ul{ padding:1%; font-size: 1vw;}
#footer ul li{ width: 48%; margin:1%; font-size:2.5vw;}
#footer a{ display: block; border: 1px solid #ccc; background: #fff; padding: 0.5em; border-radius:1.5vw;}
#footer a:hover{ text-decoration: none;}
p.copyright{ font-size:2.5vw;}
}

/*メイン*/
#wrapper{ background: #fff; max-width: 880px; margin: 0 auto; position:relative; z-index:3; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}
#content{ overflow:hidden;}
section { width:100%; background:#fff; margin:0 auto 120px;}
.maincontent { padding:0; margin:0 auto; width:800px;}
@media screen and (max-width:767px){
#wrapper{ width:100%;}
section { margin:0 auto 9%;}
.maincontent { padding:0; margin:0 auto; width:94%;}
}

/*タイトル*/
h2{ background: #329632; padding: 0.5em; text-align: center; letter-spacing: 0.05em; line-height: 1.25em; color: #fff; font-size: 32px; border-top: 10px double #fff; margin-bottom: 40px;}
h3{ padding: 0.5em; text-align: center; letter-spacing: 0.05em; line-height: 1.25em; color: #329632; font-size: 21px; border: 6px double #329632; margin: 20px auto 0; background: rgba(50,150,50,0.15);}
@media screen and (max-width:767px){
h2{ font-size:5vw; border-top:1.5vw double #fff; margin-bottom:3%;}
h3{ font-size:4vw; border:1vw double #329632; margin:3% auto 0;}
}

/*リスト*/
ul.list{ border: 1px solid #003264; background: rgba(230,240,250,1.0); padding: 0.5em 1em; margin: 40px auto;}
ul.list li{ line-height: 1.25em; padding-left: 1.25em; margin: 0.5em auto; position: relative; color: #003264; font-weight: bold;}
ul.list li span.lsf{ position: absolute; left: 0; top: 0;}
ul.list2{ border: 2px solid #009632; background: rgba(240,250,240,1.0); padding: 0.5em 1em; margin: 40px auto;}
ul.list2 li{ line-height: 1.25em; padding-left: 1.25em; margin: 0.5em auto; position: relative; color: #009632; font-weight: bold; font-size: 24px;}
ul.list2 li span.lsf{ position: absolute; left: 0; top: 0;}
ul.list2 li span.small{ font-size: 18px;}
@media screen and (max-width:767px){
ul.list{ margin:6% auto;}
ul.list2{ margin:6% auto;}
ul.list2 li{ font-size:4.5vw;}
ul.list2 li span.small{ font-size:3vw;}
}

/*画像*/
figure.waku img{ max-width: 640px; padding:10px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
span.notice{ display: block; font-size: 13px; line-height: 1.25em; text-align: center; margin-top: 1em; color: #666;}
@media screen and (max-width:767px){
figure.waku img{ max-width: 100%; padding:1vw;}
span.notice{ font-size: 2.5vw;}
}

/*解説*/
#point dl{ margin: 40px auto;}
#point dl dt{ background: #009632; color: #fff; padding: 0.5em 1em; border: 10px double #fff; font-size: 28px; line-height: 1.25em; letter-spacing: 0.1em; font-weight: bold; text-align: center;}
#point dl dt span{ font-size: 21px; background: #fff; color: #009632; display: inline-block; vertical-align: middle; padding: 0 0.5em; margin-right: 1em;}
#point dl dd{ border: 10px double #009632; border-top: none; padding: 20px; margin: 0 10px;}
#point dl dd ul{ letter-spacing: -1em; text-align: center; margin: 20px auto 5px;}
#point dl dd ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin: 0 5px;}
#point dl dd ul li span.lsf{ font-size: 48px; color:#326496;}
#point dl dd ul li img{ max-width: 320px; padding: 5px; border: 1px dotted #333;}
#point dl dd ul li img.min{ max-width: 180px;}
#point p.notice{ text-align: center; font-size: 13px;}
@media screen and (max-width:767px){
#point dl{ margin:6% auto;}
#point dl dt{ border:1vw double #fff; font-size:4.5vw; letter-spacing: 0.1em;}
#point dl dt span{ font-size:3vw; display: block; margin: 0 auto 0.5em;}
#point dl dd{ border:1vw double #009632; border-top: none; padding:3%; margin:0 1.5%;}
#point dl dd ul{ margin:3% auto 1.5%;}
#point dl dd ul li{ display:block; margin:0 auto;}
#point dl dd ul li span.lsf{ font-size:12vw; transform: rotate(90deg);}
#point dl dd ul li img{ max-width:100%; padding:1vw;}
#point dl dd ul li img.min{ max-width:100%;}
#point p.notice{ font-size:2.5vw;}
}

/*ボタン*/
figure.btn{ margin: 120px auto 0;}
figure.btn a{ display: block; background: #f0783c; color: #fff; border: 10px double #fff; font-size: 28px; line-height: 1.5em; font-weight: bold; padding: 20px;  border-radius: 100px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 10px 5px;}
figure.btn a span{ display: block; font-weight: normal; font-size: 18px; background: #fff; color: #f0783c; width: 80%; margin: 0.5em auto 0; border-radius: 30px;}
@media screen and (max-width:767px){
figure.btn{ margin:9% auto 0;}
figure.btn a{ border:1.5vw double #fff; font-size:4.5vw; padding:3%; border-radius:6vw;}
figure.btn a span{ font-size:3vw; width: 80%; border-radius:6vw;}
}
figure.btn a{ position: relative; overflow: hidden;}
figure.btn a:after{ position:absolute; display:block; top:0; left:0; width:20px; height:100%; background:#fff; opacity:0; transform:rotate(45deg); content:''; pointer-events:none; animation: btn_shine ease-in-out 2s infinite;}
@keyframes btn_shine{
0%{ transform:scale(0) rotate(45deg); opacity:0; left:0;}
50%{ transform:scale(0) rotate(45deg); opacity:.25;}
75%{ transform:scale(0) rotate(45deg); opacity:.5;}
100%{ transform:scale(100) rotate(45deg); opacity:0; left:0;}
}


@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}