@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
    font-weight: 500;
    color: #333;
	line-height:180%;
    word-break: break-all;
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../image/spacer.gif);
}
img{ image-rendering: -webkit-optimize-contrast; }
iframe { border: none;}
i.material-icons { vertical-align: middle;}

a:link {color:#000; outline:none; text-decoration:none;}
a:visited {color:#000;}
a:hover {color: #066C2F; text-decoration: underline;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
a[href^="tel:"] { text-decoration:none; pointer-events:none ; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration:none; pointer-events:none ;}

#wrapper {}
#base {}
.inner { margin: auto; width: 90%; max-width: 1200px;}

@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    body { min-width: 320px;}
}

/* Device change */
.pc{display: inherit;}
.tb{display: none;}
.sp{display: none;}
.pctb{display:block;}
.tbsp{display: none;}
@media only screen and (max-width:768px){
    .pc {display:none;}
    .tb {display:block;}
    .sp {display:none;}
    .pctb{display:block;}
    .tbsp {display:block;}
}
@media only screen and (max-width:468px){
    .pc {display:none;}
    .tb {display:none;}
    .sp {display:block;}
    .pctb{display:none;}
    .tbsp {display:block;}
}


/*======================================================
  HEADER
=======================================================*/
#header {}
#header .mainimg {
    text-align: center;
    background: url("../../image/mainimg_bg.jpg") no-repeat center center;
    background-size: cover;
}
#header .mainimg img {
    margin: auto;
    width: 90%;　max-width: 1400px;
}
#header .mainimg .inner { position: relative;}
@media only screen and (max-width:468px){
    #header .mainimg img { width:100%; max-width: inherit;}
}


/*======================================================
  CONTENT
=======================================================*/
#content { clear:both; width:100%; }


/* INNER */
#content .inner {
    display: flex; flex-direction: column; gap:150px;
    margin: auto; padding: 150px 0;
    width: 90%; max-width: 1000px;
}
#content .inner_sub{ display: flex; flex-direction: column; gap:50px;}
#content .content1 {}
#content .content2 { background: #F2EFEB; }
#content .content3 {}

@media only screen and (max-width:768px){
    #content .inner { gap:100px; padding: 100px 0;}
}
@media only screen and (max-width:468px){
    #content .inner { gap:70px; padding: 70px 0;}
}


/* TITLE */
#content h3 { 
    position: relative;
    width: 100%;
    font-size: 36px;  line-height: 36px;
    color: #D40076;
    text-align: center;
}
#content h3::before,
#content h3::after {
    position: absolute; top: 14px;
    display: block; clear: both; content:"";
    width: 145px; height:10px;
    background: #D40076;
    border-radius: 10px;
}
#content h3::before { left: 0;}
#content h3::after { right: 0;}
#content h4 { font-size: 26px; line-height: 26px; text-align: center;}
@media only screen and (max-width:768px){
    #content h3 { font-size: 30px;  line-height: 30px;}
    #content h3::before,
    #content h3::after { top:12px;width: 100px; height: 7px;}
}
@media only screen and (max-width:468px){
    #content h3 { padding-bottom: 40px; font-size:20px;  line-height:20px;}
    #content h3::before { display: none;}
    #content h3::after { margin:0; top:inherit; bottom: 0; width:100%; height:3px;}
}


/* ABOUT */
#content .about { max-width:800px;}
#content .about h3 span { display: block;}
#content .about h3 span::after {
    display: block; clear: both; content:"";
    position: absolute; top: -40px; z-index: 999;
    width: 100px; height: 100px;
    background-size: 100% auto !important;
}
#content .about h3.mid1 span:after { left: 90px; background: url("../../image/icon_hand.png") no-repeat;}
#content .about h3.mid2 span:after { right: 90px;background: url("../../image/icon_mike.png") no-repeat;}
#content .about ul { display: flex; flex-direction: column; gap:15px;}
#content .about ul li {
    padding-left: 40px;
    background: url("../../image/icon_check.png") no-repeat;
}
@media only screen and (max-width:768px){
    #content .about .inner { gap:100px;}
    #content .about h3 span::after { top: -25px; width: 70px; height: 70px;}
    #content .about h3.mid1 span:after { left: 70px;}
    #content .about h3.mid2 span:after { right: 60px;}
}
@media only screen and (max-width:468px){
    #content .about .inner { gap:70px;}
    #content .about h3 { padding-top: 80px;}
    #content .about h3 span::after { margin: auto; top: 0; left: 0 !important; right: 0 !important;}
}


/* VOICE */
#content .voice h4 img { margin: auto; width: 90%; max-width: 1000px;}
#content .voice .voice_list  { display:flex; flex-direction: column; gap:50px;}
#content .voice .voice_list dl {
    display: flex; flex-wrap:wrap; gap:40px;
    align-items: center;
}
#content .voice .voice_list dt { width:200px; }
#content .voice .voice_list dt img { width:200px; height: auto;}
#content .voice .voice_list dt span { width:100%; display: block;  padding-top:10px; text-align: center;}
#content .voice .voice_list dl dd {
    position: relative;
    display: flex; flex-direction: column; gap:15px;
    width:calc( 100% - 40px - 200px);
    padding:40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}
#content .voice .voice_list dl dd::before {
    position: absolute; top: 30px;
    display: block; clear: both; content:"";
    width: 32px; height: 36px;
    background: url("../../image/fukidasi.png") no-repeat;
    background-size: 100% auto;
}
#content .voice .voice_list dl dd b { font-size: 162.5%;}
#content .voice .voice_list dl:nth-child(2) { flex-direction: row-reverse;}
#content .voice .voice_list dl:nth-child(1) dd::before { left: -32px;}
#content .voice .voice_list dl:nth-child(2) dd::before { right: -32px; transform: scaleX(-1);}
#content .voice .voice_list dl:nth-child(3) dd::before { left: -32px;}
@media only screen and (max-width:768px){
    #content .voice .voice_list dt { width:150px; }
    #content .voice .voice_list dt img { width:150px; }
    #content .voice .voice_list dl dd { width:calc( 100% - 40px - 150px); }
}
@media only screen and (max-width:468px){
    #content .voice .voice_list dl {
        flex-direction: column; gap:20px;
        padding: 30px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    }
    #content .voice .voice_list dt { 
        margin: auto; padding-bottom: 20px;
        width:100%;
        text-align: center;
        border-bottom: 1px dotted #555;
    }
    #content .voice .voice_list dt img { width:150px; height: auto;}
    #content .voice .voice_list dl dd { padding: 0; width: 100%; background: none; box-shadow: none;}
    #content .voice .voice_list dl dd::before { display: none;}
    #content .voice .voice_list dl dd b { font-size: 125%;}
}


/* HISTORY */
#content .history { position: relative; padding: 60px 40px; border: 5px solid #D40076; border-radius: 30px;}
#content .history h4.tit {
    position: absolute; top: -20px; left: 0; right: 0;
    margin: auto; width: 220px;
    font-size: 36px; line-height: 36px;
    color: #D40076;
    letter-spacing: 4px;
    background: #fff;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #content .history { padding: 40px 20px;}
}


/* BANNER */
#content .banner ul { display: flex; flex-wrap:wrap; gap:20px;}
#content .banner ul li { width:calc(50% - 10px);}
#content .banner ul li img { width:100%; height: auto;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #content .banner ul { flex-direction: column;}
    #content .banner ul li { width:100%;}
}


/* LICENSE */
#content .license {}
#content .license .come { padding: 5%; background: #f6f6f6;}
#content .license ul { display: flex; flex-wrap:wrap; gap:20px 40px;}
#content .license ul li { position: relative; padding-left: 20px; width:calc(50% - 20px);}
#content .license ul li::before {
    position: absolute; left: 0; top: 10px;
    display: block; clear: both; content:"";
    width: 10px; height: 10px;
    background: #D40076;
    border-radius: 10px;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #content .license ul { flex-direction: column;}
    #content .license ul li { width: 100%;}
}


/* BOOK */
#content .book {
    display: flex; flex-wrap:wrap; gap:50px;
    margin: auto;
    padding: 5%;
    border: 5px solid #D40076;
    border-radius: 30px;
}
#content .book .photo { width: 30%; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);}
#content .book .photo img { width: 100%; height: auto;}
#content .book .cont { display: flex; flex-direction: column; gap:20px; width:calc(70% - 50px);}
#content .book .cont h5 b,
#content .book .cont h5 small { display: block;}
#content .book .cont h5 b { font-size: 150%;}
#content .book .cont h5 small {  font-size: 112.5%;}
@media only screen and (max-width:768px){
    #content .book { flex-direction: column;  gap:30px; padding:10% 5%;}
    #content .book .photo { width: 150px; margin: auto;}
    #content .book .cont { width:100%;}
}
@media only screen and (max-width:468px){
}



/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { padding: 70px 0 90px; background: #F2EFEB; }
#footer .cont1,
#footer .cont2 { 
    display: flex; flex-wrap:wrap; justify-content: space-between;
    padding: 40px 0;
}
#footer .cont1 { border-bottom: 1px solid #ddd;}
#footer .cont2 { flex-direction: row-reverse; }
#footer .f_nav { display: flex; flex-wrap:wrap; justify-content: space-between; gap:20px; width: 100%;}
#footer .f_nav li { width: calc(33.3% - 16px);}
#footer .f_nav li a {
    display: block;
    padding: 20px 60px 20px 20px;
    color: #D40076;
    background: #fff url("../../image/arrow.png") no-repeat 95% center;
    background-size: 20px auto;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}
#footer .sns { display: flex; gap:10px;}
#footer .sns img { width: 25px; height: auto;}
#footer .copy { font-size: 87.5%;}
@media only screen and (min-width:768px){
    #footer .f_nav li a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #footer .cont1,
    #footer .cont2 { flex-direction: column; align-items: center;}
    #footer .cont2 { gap:20px;}
    #footer .f_nav { flex-direction: column;}
    #footer .f_nav li { width:100%;}
}
@media only screen and (max-width:468px){
}
 


/*====================================================================================================
  FIX CONTENT
====================================================================================================*/
#fix_nav {
    position: fixed; left: 0; bottom:0; z-index: 999;
    display: flex; justify-content: center; gap:20px;
    padding: 20px 0;
    width: 100%;
    background: rgba(0,0,0,0.70);
    /*background:rgba(242,239,235,0.90);*/
}
#fix_nav .b_buy a {
    position: relative;
    display: block;
    margin: auto;
    padding:10px 20px;
    width: 250px;
    font-weight:bold;
    font-size:125%;
    color: #fff;
    text-decoration: none;
    background:#D40076;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
#fix_nav .b_buy a::before {
    position: absolute; top: -10px; right: 20px;
    display: block; clear: both; content:"";
    width: 50px; height: 70px;
    background:url("../../image/ugubon.png") no-repeat;
    background-size: 100% auto;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    transform: rotate(15deg);
}
#fix_nav .b_line a {
    position: relative;
    display: block;
    margin: auto;
    padding:10px 20px 10px 50px;
    text-align: center;
    font-weight:bold;
    font-size:125%;
    color: #fff;
    text-decoration: none;
    background:#06C755 url("../image/icon_line2.svg") no-repeat 15px center;
    background-size: 30px auto;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:468px){
    #fix_nav { padding: 10px 20px !important; gap:10px;} 
    #fix_nav .b_buy a::before { display: none;}
    #fix_nav .b_buy,
    #fix_nav .b_line { margin: auto;}
    #fix_nav .b_buy a,
    #fix_nav .b_line a { padding: 5px 10px;  width: 150px; font-size: 87.5%; text-align: center;}
    #fix_nav .b_line a { text-align:right;  padding-right: 20px;}
}
 


/*====================================================================================================
  COLOR eto.. [No Touch]
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}