@charset "utf-8";

/* nomalized */

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
html {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

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

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

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
  text-decoration:none;
}

a:active,
a:hover {
  outline-width: 0;
  text-decoration:none;
}

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

b,
strong { font-weight: inherit;}

small {
  font-size: 80%;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

address { font-style:normal;}

img { display:block; line-height:0; font-size:0; border-style:none; }

html { font-size: 120%; }



/*
10px	62.5%
11px	68.8%
12px	75%
13px	81.3%
14px	87.5%
15px	93.8%
16px	100%
17px	106.3%
18px	112.5%
19px	118.8%
20px	125%
21px	131.3%

width : 1024px

bace:
calc(112.5% + 0.25vw) = 20px = 1rem

35px = 1.75rem
34px = 1.7rem
33px = 1.65rem
32px = 1.6rem
31px = 1.55rem
30px = 1.5rem
29px = 1.45rem
28px = 1.4rem
27px = 1.35rem
26px = 1.3rem
25px = 1.25rem
24px = 1.2rem
23px = 1.15rem
22px = 1.1rem
21px = 1.05rem
20px = 1rem
19px = 0.95rem
18px = 0.9rem
17px = 0.85rem
16px = 0.8rem
15px = 0.75rem
14px = 0.7rem
13px = 0.65rem
12px = 0.6rem
11px = 0.55rem
10px = 0.5rem

*/

body 	{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background:url(../images/body_bg.gif) repeat;  position:relative;}
a:hover { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; }
.txt_pink { color:#fd4e5f;}
/*---------------*/



/*-----------------------------------------------------------
###
-----------------------------------------------------------*/

body { background-color:#ccc;}
header { width:920px; margin:0 auto; background-color:#fff; padding:0 0 30px 0; }
header h1 { padding:20px 22px; background-color:#f3f3f3; margin:0 auto; width:800px; font-size:22px; font-weight:bold; }
header h1 img.title_pc { height:16px; width:auto; display:inline-block;}
header h1 img.title_sp { display:none;}
header h1 div.sns1 { height:43px; width:auto; display:inline-block; vertical-align: middle; margin:0 0 0 18px;}
header h1 div.sns1 img { height:100%; width:auto; display:inline-block; margin:0; padding:0; font-size:0; line-height:0;}
header h1 div.sns1 img.sns_deco1 { margin:0 10px 0 0;}
header h1 div.sns1 a { margin:0; padding:0; line-height:0; font-size:0;}
ul.text_area { width:920px; margin: 0 auto;}
ul.text_area li img { width:885px; margin: 0 auto}
ul.text_area li img.txt_sp {display: none;}
div.container { width:920px; padding:0 60px; margin:0 auto; height:auto; background-color:#FFF;}
div.container div.main_img { position:relative; padding: 0 auto;}
div.container div.main_img img { margin: 0 auto 18px auto; width: 400px; display: block; padding: 30px 0 0 0;}
div.container div.main_img img.comment { position:absolute; width: 140px; top: 190px; left: 30px;}
div.container div.main_img a {display: block;background-color: #92C827 !important; width: 50%; padding: 20px;	 border-radius: 5px;  margin:25px auto 0 auto; color:#fff; text-align:center;}
div.container .content1 { width:100%; margin:35px 0 35px 0;}
div.container .content1 p { line-height:1.7; font-size:18px; margin:0 0 15px 0; display:block;}
div.container .content1 p span.sns_icon { display:none;}
div.container .content1 p.cap { font-size:10px; line-height:1.5}
div.container .content1 dl { width:100%; height:auto; margin:30px 0 0 0}
div.container .content1 dl dt { background-color: #000; color:#fff; border-radius: 15px; width:23%; height:auto; margin:0 0 0 0; padding:2px 0 0 0; text-align: center; display:inline-block;  line-height:1.4; font-size:15px; vertical-align: top; }
div.container .content1 dl dd {  width:74.1%; height:auto; margin:0 0 0 2%; padding:0; display:inline-block; line-height:1.7; vertical-align: top; font-size: 15px;}
div.container .content1 dl dd p { margin:0; padding: 0;font-size: 15px;} 

h3 { line-height:1.6; font-size:28px; margin:10px 0 10px 0 ; color:#27bd70;}
h3 ul {}
h3 ul li { display:block; font-weight:bold;}
h2 { background-color: #e5e5e5; color:#000; padding:13px 12px 10px 12px; line-height:1; margin:35px 0 20px 0; font-size:20px; display:block;}
div.container .consectetur { width:100%;}
div.container .consectetur .banner { display:inline-block;}
div.container .consectetur .banner img { width:356px; height:auto; border:#d3d2d3 1px solid;}
div.container .consectetur .sit { display:inline-block;}
div.container .consectetur .sit ul { margin:0 0 0 400px;}
div.container .consectetur .sit ul li { display:inline-block; }
div.container .amet { width:100%;  display:block; text-align:right; padding:20px 0;}
div.container .amet p { display: inline-block;}
div.container .amet p a { display:block; background-color:#ddd; padding:15px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-align:center; font-size:15px; color:#333;}
div.container .amet p a:hover {  color:#333;}
div.container .amet p a:active { color:#333;}
div.container .amet p a:visited { color:#333;}
div.container #online-book { width:100%; height:auto; margin:0 0 60px 0;}
div.container #online-book ul {}
div.container #online-book ul li { display:inline-block;}
div.container #online-book ul li a { display:block; padding:0; border:#ccc 1px solid;}
div.container #online-book ul li a img { width:125px; height:auto; }
footer { width:920px; margin:0 auto; padding:10px 0 0 0; height:80px; background-color:#fff; font-size:11px; text-align:center; }
footer ul { width:100%; height:30px; line-height:30px; text-align:left; padding:0 10px; margin:0 0 10px 0; border-bottom:#666 1px dotted;}
footer ul li { display:inline-block; margin:0 5px;  }
footer ul li a { color:#333; border-left:1px solid #666; padding:0  0 0 15px;}
footer ul li:first-child a { border-left:none; padding:0  0 0 0;}
footer ul li img { margin:0 0 0 500px;}
footer span { display:inline-block;}


@media screen and (max-width:1024px) {

div.container .content1 ul.off-shot li { display:inline-block; width:47%; margin:1%}


}

@media screen and (max-width:768px) {
header { width:100%; margin:0 auto; background-color:#fff; padding:0 0 40px 0; }
header h1 { padding:20px 22px; background-color:#f3f3f3; margin:0 auto; width:100%; font-size:22px; font-weight:bold; text-align:center; }
header h1 img.title_pc { display:none;}
header h1 img.title_sp { height:60px; width:auto; display:inline-block; margin:10px 0 15px 0;}
header h1 div.sns1 { height:43px; width:100%; display:inline-block; vertical-align: middle; margin:0 auto;}
header h1 div.sns1 img { height:100%; width:auto; display:inline-block; margin:0; padding:0; font-size:0; line-height:0;}
header h1 div.sns1 img.sns_deco1 { margin:0 10px 0 0;}
header h1 div.sns1 a { margin:0; padding:0; line-height:0; font-size:0;}
ul.text_area { width:100%; margin: 0 auto;}
ul.text_area li img { width:90%; margin: 0 auto}
ul.text_area li img.txt_sp {display: block;}
ul.text_area li img.txt_pc {display: none;}
div.container div.main_img { position:relative; padding: 0 auto; text-align: center;}
div.container div.main_img img { margin: 0 0 0 0; width: 70%; display: inline-block ; padding: 0 0 0 0;}
div.container div.main_img img.comment { position:relative; width: 30%; top:0; left:0; display: block ; margin:0; padding: 20px 0 10px 0;}
div.container div.main_img a { width: 70%; padding: 20px; margin: 15px auto 0 auto; }
div.container { width:100%; padding:0 40px; margin:0 auto; height:auto; background-color:#FFF;}
div.container .content1 { width:100%; margin:0 0 0 0;}
div.container .content1 p { line-height:1.7; font-size:17px; margin:0 0 15px 0;}
div.container .content1 dl { width:100%; height:auto; margin:7vw 0 0 0}
div.container .content1 dl dt { background-color: #000; color:#fff; border-radius: 15px; width:100%; height:auto; margin:0 0 2vw 0; padding:2px 0 0 0; text-align: center; display:inline-block;  line-height:1.4; font-size:15px; vertical-align: top; }
div.container .content1 dl dd {  width:100%; height:auto; margin:0 0 0 2%; padding:0; display:inline-block; line-height:1.7; vertical-align: top; font-size: 15px;}
div.container .content1 dl dd p { margin:0 0 2vw 0; padding: 0;font-size: 15px; line-height: 1.4; width: 100%;}
div.container .content1 dl dd p span { display:inline-block; width: 85%; vertical-align: top;}
div.container .content1 dl dd p span.deco_list { width: 10%;}
h3 { line-height:1.6; font-size:26px; margin:10px 0 10px 0 ; background-color: #e5e5e5; color:#000;}
h3 ul {}
h3 ul li { display: inline; font-weight:bold;}
h3 ul li.br:before { content: "\A" ; white-space: pre ; }
h2 { background-color: #e5e5e5; color:#000; padding:13px 12px 10px 12px; line-height:1; margin:35px 0 20px 0; font-size:18px; display:block;}
div.container .consectetur { width:100%; margin: 20px 0 0 0;}
div.container .consectetur .banner { display:inline-block;}
div.container .consectetur .sit { display:inline-block;}
div.container .consectetur .sit ul { margin:0 0 0 400px;}
div.container .consectetur .sit ul li { display:inline-block; }
div.container .amet { width:100%;  display:block; text-align:right; padding:20px 0;}
div.container .amet p { display: inline-block;}
div.container .amet p a { display:block; background-color:#ddd; padding:15px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-align:center; font-size:15px; color:#333;}
div.container .amet p a:hover {  color:#333;}
div.container .amet p a:active { color:#333;}
div.container .amet p a:visited { color:#333;}
div.container #online-book { width:100%; height:auto; margin:0 0 60px 0;}
div.container #online-book ul { width:100%;}
div.container #online-book ul li { display:inline-block; width:24%; margin:0 0 5px 0;}
div.container #online-book ul li a { display:block; padding:0; border:#ccc 1px solid; width:100%; margin:0 auto; text-align:center;}
div.container #online-book ul li a img { width:100%; height:auto; display:inline-block;}
footer { width:100%; margin:0 auto; padding:10px 0 0 0; height:80px; background-color:#fff; font-size:11px; text-align:center; }
footer ul { width:100%; height:30px; line-height:30px; text-align:left; padding:0 10px; margin:0 0 10px 0;border-bottom:#666 1px dotted; position:relative;}
footer ul li { display:inline-block; margin:0 5px;  }
footer ul li a { color:#333; border-left:1px solid #666; padding:0 0 0 15px;}
footer ul li:first-child a { border-left:none;}
footer ul li img { position:absolute; top:4px; right:10px;}
footer span { display:inline-block;}


}


@media screen and (max-width:680px) {
div.container .content1 p img.present_pc { width:100%}
div.container #online-book { width:auto; height:auto; margin:0 0 40px 0;}
div.container #online-book ul li { display:inline-block; width:23.5%; margin:0 0 5px 0;}

}

@media screen and (max-width:480px) {
header { padding:0 0 10px 0; }

header h1 { padding:20px 17px; background-color:#f3f3f3; margin:0 auto; width:100%; font-size:22px; font-weight:bold; text-align:center; }
header h1 img.title_sp { height:auto; width:94%; display:inline-block; margin:10px 0 15px 0;}

header h1 div.sns1 { height:35px; width:100%; display:inline-block; vertical-align: middle; margin:0 auto;}
header h1 div.sns1 img { height:83%; width:auto; display:inline-block; margin:0; padding:0; font-size:0; line-height:0;}
div.container { padding:0 10px;}

div.container .content1 p { line-height:2; font-size:15px; margin:0 0 15px 0;}
div.container .content1 p img.present_pc { display:none;}
div.container .content1 p img.present_sp { display:block; width:100%; height:auto;}
div.container .content1 p span.sns_txt { display:none;}
div.container .content1 p span.sns_icon { display: inline-block; margin:0 5px 0 0;}
div.container .content1 p span.sns_icon img { height:15px; width:auto; }
div.container .content1 ul.copy { line-height:1.6; padding:0 1px; }
div.container .content1 ul.copy li { display: inline; font-size:15px;  line-height:1.7; margin:0 -6px 0 0;}
div.container .content1 ul.off-shot { display: inline-block; padding:0;}
div.container .content1 ul.off-shot li { display:inline-block; width:47.8%; margin:7px}
div.container .content1 ul.off-shot li img { width:100%; height:auto;}
h3 { line-height:1.5; font-size:22px; margin:10px 0 10px 0 ; }
h3 ul {}
h3 ul li { display: inline; font-weight:bold;}
h2 { padding:13px 12px 10px 12px; line-height:1; margin:35px 0 20px 0; font-size:18px;}
div.container .content1 dl { line-height:1.7;}
div.container .content1 dl dt { font-size:15px; line-height:2;}
div.container .content1 dl dd { display: inline-block; width:100%}
div.container .content1 dl dd a { width:35%; display:inline-block; margin:0 2% 0 0;}
div.container .content1 dl dd a img { display:inline-block; width:100%; height:auto;}
div.container .content1 dl dd img.sns_deco2 { display:inline-block; width:20%; height:auto; margin: 0 17px 20px 0;}

div.container .content1 ul.off-shot li { display:inline-block; width:99%; margin:0;}
div.container .consectetur { width:100%;}
div.container .consectetur .banner { display:block; width:100%;}
div.container .consectetur .banner img { width:100%; height:auto; border:#d3d2d3 1px solid;}

div.container #online-book { width:100%; height:auto; margin:0 0 5px 0;}
div.container #online-book ul li { display:inline-block; width:48.1%; margin:0 0 5px 0;}
div.container .amet { padding:10px 0;}
div.container .amet p { width:100%;}
div.container .amet p a { display:block; width:100% !important; }

footer { width:100%; margin:0 auto; padding:10px 0 0 0; height: 108px; background-color:#fff; font-size:11px; text-align:center; border-top:1px #666 solid; }
footer ul { width:100%; height:auto; line-height:20px; text-align: left; padding:0 10px; margin:0 0 10px 0;border-bottom:none; position:relative;}
footer ul li { display:block; margin: 1px 0 0 0;  }
footer ul li a { color:#333; border-left:none; padding:0 0 0 0;}
footer ul li:first-child a { border-left:none;}
footer ul li img { position: absolute; top: -7px; right:10px; margin:9px 0 0 0;}
footer span { display:block; font-size:9px !important; margin:0; padding:0; position:relative;}
}

@media screen and (max-width:375px) {
div.container .content1 p span.br:before { content: "\A" ; white-space: pre ; }
}

@media screen and (max-width:320px) {
header { padding:0 0 10px 0; }
header h1 img.title_sp { height:auto; width:100%; display:inline-block; margin:7px 0 15px 0;}
div.container { width:100%; padding:0 10px; margin:0 auto; height:auto; background-color:#FFF;}
div.container .content1 ul.copy li {margin:0 -8px 0 0;}
}