@charset "UTF-8";
/* CSS Document */
/* top-page */
.section{margin: 20px 10px 3em;}
hr.tpi-title-border{border-top: 1px solid #117800 !important;}
h2.tpi-title{text-align: center;
color:#117800;
font-size:2em;
margin:0.5em auto;}
h3.tpi-title-c{text-align: center; font-size:2em;color:#117800;line-height: 0.8em;}
h3.tpi-title-c span.tpi-title-c_mini{font-size:0.5em;}
h4.tpi-txt-title{color:#117800;font-size:1.2em;}

div.tpi-box{ display:table; border-collapse: separate;border-spacing: 20px 0;  /* 左右 上下で記述 */}
div.tpi-box .photo,div.tpi-box .txt{display:table-cell;vertical-align: top;}
div.tpi-box .photo{width:40%; text-align:center;}
div.tpi-box .txt{width:56%;}
a.product-link-btn{padding: 10px;
display: block;
background: #117800;
text-align: center;
margin: 10px auto;
color: #fff;
font-size: 1.2em;}
a.product-link-btn:hover{padding: 10px;color: #0CF; opacity:0.8;}

.osusume-box{  padding: 20px;
  margin: 2em auto;
  max-width: 400px;/*無くてもOK*/
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 0px 10px rgba(0,0,0,0.2);
  position:relative;
}
.osusume-box h4 { font-size:1.3em;color:#117800; text-align:center; margin:10px 0;}
.top-link-bnr-box{display: inline-block;text-align: center;padding: 10px 20px;vertical-align: top;}

div.dr-box{ display:table; border-collapse: separate;border-spacing: 20px 0;  /* 左右 上下で記述 */}
div.dr-box .photo,div.dr-box .txt{display:table-cell;vertical-align: top;}
div.dr-box .photo{width:30%;}
div.dr-box .txt{width:66%;}
.dr-txt-box{ padding: 20px;
  margin: 0 auto 30px;
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 0px 10px rgba(0,0,0,0.2);
  position:relative;}
div.dr-box img{ text-align:center;}
h4.dr-name{ font-size:1.3em;color:#117800}
a.mini-link-btn{padding: 10px;width: 100%;display: block;text-align: center;margin: 15px auto;border: 1px solid;}

h3.voice-title{ text-align:center; font-size:1.5em; font-weight:normal;color:#117800;}
.voice-name{ text-align: right;font-size:1.3em;color:#117800;line-height: 1em;display: block; }

h5.cosmerepo-title{ text-align:center; font-size:2em; font-weight:normal;}
a.repo-link-btn{padding: 10px;
width: 300px;
display: block;
text-align: center;
margin: 15px auto;
background: #ca366b;
font-size: 1.5em;
color: #fff;}
a.repo-link-btn:active{ opacity:0.8;}


.top-p-list-box-wrap{max-width: 900px;margin: 0 auto;}
.top-p-list-box{float: left;}
ul.top-p-list li{display: inline-block;margin: 10px;}
.top-p-plice{font-size: 1.2em;text-align: center;color: #b3850c;margin: 10px auto 0;}
.clear{clear:both; margin:0; padding:0;}


/* privacy-page */
h3.privacy-title{color:#117800; border-bottom:solid 1px #117800;}

@media screen and (max-width: 900px) {
.top-p-list-box{float: none;text-align: center;}
}
@media screen and (max-width: 599px) {
h2.tpi-title{font-size: 1.4em;line-height: 0.4em;}
h3.voice-title {font-size: 1.2em;line-height: 1.2em;}
h5.cosmerepo-title {font-size: 1em;}
	
div.tpi-box{ display:block;}
div.tpi-box .photo,div.tpi-box .txt{display:block;}
div.tpi-box .photo,div.tpi-box .txt{width:96%;}
.top-link-bnr-box{display:block; text-align:center;}
div.dr-box{display:block;}
div.dr-box .photo,div.dr-box .txt{display:block;}
div.dr-box .photo,div.dr-box .txt{width:96%;}
a.repo-link-btn{width:auto;}
}


/* detail-page */
h3.detail-free-title{display: flex;
align-items: center;
color:#117800;
font-size:1.2em;
}
h3.detail-free-title:before,
h3.detail-free-title:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
h3.detail-free-title:before {
margin-right: 1rem;
}
h3.detail-free-title:after {
margin-left: 1rem;
}
h3.detail-title{text-align: center;background: #e0f4da;padding: 5px 0;font-weight: normal;}
h4.detail-title{ font-size:1.2em;color:#117800;}

/* ページトップボタン */
#pagetop{
    text-align: center;
    background-color: #278D0B;
    padding:10px;
    margin: 10px auto;
    position: fixed;
    bottom: 7px;
    right: 7px;
    border-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-size: 12px;
    -ms-filter: "alpha(opacity=70)";
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}
#pagetop img{ width:40px !important;}