@charset "UTF-8";
/* CSS Document */

html {
 width: 100%;
 height: 100%;
 font-size: 62.5%;
	scroll-behavior: smooth;
	
}
body {
width: 100%;
height: 100%;
color: #000000;
font-size: 1.6rem;
line-height: 3.5rem;
font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin: 0 auto;
background-color: #c2d7e3;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
.container {
width: 100%;
max-width: 980px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
margin-top: 10px;
padding-bottom: 20px;
}
.inner980 {
 width: 100%;
 max-width: 980px;
	box-sizing: border-box;
}
@media screen and (max-width:768px){
body {
font-size: 1.4rem;
line-height: 2.3rem;
}
.inner980 {
width: 98%;
margin-left: auto;
margin-right: auto;
}
}


header {
margin-bottom: 25px;
}
header img {
}

.wrapper {
display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 display: -webkit-flexbox;
 display: -moz-box;
 display: -moz-flex;
 display: -moz-flexbox;
 display: -ms-flexbox;
 -js-display: flex;
justify-content: space-between;
 -webkit-justify-content: space-between;
align-items: flex-start;
 -webkit-align-items: flex-start;
margin-left: 3%;
margin-right: 3%;
word-break: break-all;
}
.wrapper #sideBox {
width: 25%;
}
.wrapper #mainBox {
width: 72%;
}

side {
margin-bottom: 50px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
side ul {
margin-bottom: 50px;
}
side ul li {
margin-bottom: 10px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border-radius: 15px;
background-color: #80ABC4;
line-height: 2.3rem;
box-shadow: 3px 3px 8px rgba(255,255,255,0.3) inset;
}
side ul li i {
margin-right: 5px;
color: #FFFFFF;
}
side ul li a {
color: #FFFFFF;
text-decoration: none;
}
side ul li:hover {
background-color: #487D9D;
}

main{
padding-bottom: 50px;
}
section {
margin-bottom: 60px;
}
section span.pink {
color: #ee4a83;
font-weight: bold;
}
section span.blue {
color: #5295e0;
font-weight: bold;
}
section span.green {
color: #7db72b;
font-weight: bold;
}
section span.yellow {
color: #ffae00;
font-weight: bold;
}
section span.txt_b {
font-size: 2em;
line-height: 2.5rem;
letter-spacing: 2px;
margin-left: 2px;
margin-right: 2px;
font-weight: bold;
}
section span.maker_yellow {
background-color: #FFE0A4;
}
section span.link {
padding-left: 30px;
background-image: url(../img/link.png);
background-repeat: no-repeat;
background-position: 7px center;
padding-right: 5px;
font-weight: bold;
}
section span.link a {
color: #7db72b;
text-decoration: none;
}
section span.link a:hover {
color: #629120;
text-decoration: none;
}


#catchSct  {
background-color: #FFFFFF;
-webkit-box-shadow: 0px 0px 20px #D9D9D9;
box-shadow: 0px 0px 20px #D9D9D9;
padding: 1%;
}
#catchSct .wrp  {
border: 2px dashed #86b0c8;
padding-top: 7%;
padding-right: 5%;
padding-left: 5%;
padding-bottom: 7%;
}
#catchSct h1  {
font-size: 2.5rem;
line-height: 3.2rem;
font-weight: bold;
color: #dc8faa;
margin-bottom: 20px;
}
#catchSct h1 span  {
font-size: 4.0rem;
}
#catchSct div#note  {
padding-top: 0;
padding-bottom: 0;
font-size: 1.6rem;
line-height: 2.3;
background: repeating-linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,0) 35px, #ccc 35px, #ccc 36px);
}
#catchSct  > p {
margin-top: 0;
margin-bottom: 24px;
}
#catchSct p:first-letter { margin-left: 2rem;
}


.captionSct h2 {
color: #FFFFFF;
border-radius: 50px;
background-color: #dc8faa;
padding-right: 30px;
padding-left: 30px;
font-weight: bold;
margin-bottom: 40px;
display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 display: -webkit-flexbox;
 display: -moz-box;
 display: -moz-flex;
 display: -moz-flexbox;
 display: -ms-flexbox;
 -js-display: flex;
flex-wrap:   wrap;
 -webkit-flex-wrap: wrap;
 -moz-flex-wrap: wrap;
 -ms-flex-direction: wrap;
align-items: center;
 -webkit-align-items: center;
padding-top: 15px;
padding-bottom: 15px;
position: relative;
}
.captionSct h2 img {
margin-right: 10px;
}
.captionSct h2 p {
font-size: 2.7rem;
line-height: 3.2rem;
margin-bottom: 0px;
}
.captionSct  > p:first-letter { margin-left: 1rem;
}

.captionSct h2:after {
content: url("../img/h2_fuki.png");
position: absolute;
bottom: -35px;
left: 50px;
}
.captionSct h3 {
color: #dc8faa;
font-size: 2.0rem;
line-height: 2.5rem;
border-left: 10px solid #dc8faa;
background-color: #E9E9E9;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 15px;
font-weight: bold;
margin-top: 50px;
}
.captionSct p {
margin-bottom: 20px;
}
.captionSct ul {
margin-bottom: 20px;
}
.captionSct ul li {
font-size: 1.6rem;
margin-bottom: 10px;
font-weight: bold;
}
.captionSct ul li:before {
content: "●";
color: #dc8faa;
margin-right: 5px;
font-size: 2.5rem;
}

.captionSct blockquote {
position: relative;
margin-bottom: 50px;
margin-top: 50px;
}
.captionSct blockquote img {
top: 10px;
left: 0px;
width: 15%;
position: absolute;
}
.captionSct blockquote div {
background-color: #f5f7f1;
border-radius: 20px;
padding-left: 30px;
margin-left: 85px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
}

.captionSct dl {
position: relative;
margin-bottom: 50px;
}
.captionSct dl dt {
background-color: #86b0c8;
color: #FFFFFF;
font-weight: bold;
font-size: 1.8rem;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
position: absolute;
top: -15px;
}
.captionSct dl dt:before {
content: "●";
color: #dc8faa;
margin-right: 5px;
font-size: 2.5rem;
}
.captionSct dl dd {
background-color: #e7eff4;
padding-top: 40px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
margin-left: 30px;
}

.btn {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 419px;
}

@media screen and (max-width:768px){
.wrapper {
display: block;
}
.wrapper #sideBox {
width: 100%;
}
.wrapper #mainBox {
width: 100%;
}

.captionSct blockquote {
position: relative;
margin-bottom: 50px;
}
.captionSct blockquote img {
position: absolute;
top: 20px;
left: 0px;
}
.captionSct blockquote div {
border-radius: 10px;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
margin-left: 20px;
}
}

footer {
text-align: center;
}
footer p {
font-size: 1.3rem;
line-height: 1.8rem;
margin-top: 10px;
margin-bottom: 20px;
}