@charset "utf-8";
/*-------------------
   clearfix
-------------------*/
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 *zoom: 1;
}
/*-------------------
   common
-------------------*/
.wrapper {
	font: 1.0em/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt";
	letter-spacing: .1em;
	padding: 0 0;
	position: relative;
}
.wrapper * {
	box-sizing: border-box;
}
.wrapper a {
	color: inherit;
	display: block;
}
.wrapper img {
	height: auto;
	max-width: 100%;
}
#container .flex {
    align-items: flex-start;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
/*  全体指定 スマホ縦 i5 i5SE　350pxまで  */
 
/*-- 画面外にいる状態 --*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: ease-in 400ms;
}
/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#container section {
	margin: 0 auto;
	padding: 0 0;
}
/*--------------------*/
#container .mainvisual p,
#container .last{
	color: #000;
    font: 1.0rem/1.5 'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 20px 10px;
    text-align: justify;
    text-justify: inter-ideograph;
}
#container .mainvisual{
	color: #000;
    font: 1.0rem/1.5 'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 20px 10px 40px;
    text-align: justify;
    text-justify: inter-ideograph;
}
/*--top-text--*/
#container .top-text,
#container .box dt{
    color: #f37891;
    font: 1.2rem/1.2 'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 20px auto;
    padding: 0;
    position: relative;
    text-align: center;
}
/*----*/
#container .box {
    border-bottom: dotted 2px #d7d7d7;
    margin: 0 0 10px;
}
#container .item-box ul {
    margin: 0 20px;
}
#container .item-box li {
    display: flex;
    position:relative; 
    color: #000;
    font: 1.0rem/1.4 'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 0 0 20px;
    text-align: justify;
    text-justify: inter-ideograph;
}
#container .item-box li:before{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin: 3px 0;
    border: transparent solid 7px;
    border-left-color: #f37891;
}
#container .box dd{
    color: #000;
    font: 1.2rem/1.2 'Helvetica Neue','Helvetica','Arial',sans-serif;
    text-align: center;
    margin: 0 0 20px;
}
#container .attention{
    margin: 0 0 40px;
}
#container .attention dl{
    border: solid 1px;
    color: red;
    line-height: 1.5;
    padding: 7px 20px 20px;
}
#container .attention dl dt{
    background: red;
    color: white;
    font-size: 1.2rem;
    text-align: center;
    padding: 4px 0;
    margin: 12px 0;
}
#container .attention dl dd{
    margin: 0px 5%;
}
#container .pricedown{
    margin: 0 0 40px;
}
#container .pricedown th {
    border: solid 1px #9c9c9c;
    background-color: #4c4c4c;
    color: #fff;
    text-align: center;
    padding: 9px;
}
#container .pricedown td {
    border: solid 1px #9c9c9c;
    padding: 7px;
}
#container .pricedown td.new{
    color: red;
    font-weight: bold;
    vertical-align: middle;
}
#container .pricedown td.pn{
    padding: 5px 5px 5px 8px;
    vertical-align: middle;
}
#container .pricedown td.old{
    text-decoration: line-through;
    vertical-align: middle;
}
#container .pricedown td.not{
    font-size: 0.8rem;
    vertical-align: middle;
}
#container .mainvisual .tyui{
    color: red;
    display: inline;
    font-size: 1.2rem;
    font: 1.2rem;
    margin: 0 auto;
    font-weight: bold;
}
#container dd .tyui{
    color: red;
    line-height: 1.5;
}
#container .banner{
    margin: 20px auto;
}
#container .box td{
    width: 16%;
    padding: 4px;
}
#container .box .brand {
    font-size: 1.2rem;
    margin: 0 0 3px;
}
#container .box img {
    border: solid 1px #d4d4d4;
    margin: 0 0 20px;
}
#container .box .brand em{
    color: black;
    font-size: .8rem;
}


@media screen and (min-width:350px) and ( max-width:480px) {
/*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
#container .pricedown th.one{
    width: 56%;
}
#container .pricedown th.two, #container .pricedown th.three{
    width: 22%;
}
#container .pricedown td.old, #container .pricedown td.new{
    letter-spacing: -0.05em;
}
#container .box .brand{
    font-size: 1rem;
    line-height: 0.8rem;
    height: 30px;
}
#container .box .brand em{
    font-size: .4rem;
}
}

 @media screen and (min-width:480px) and ( max-width:960px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
#container .item-box {
    margin: 0;
}
#container .item-box ul {
    margin: 0 50px;
}
#container .mainvisual p,
#container .last{
    text-align: center;
}
}
 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
#container {
    margin: 0 auto;
    width: 1040px;
}
#container .box {
    margin: 0 0 40px;
}
#container .box dd {
    margin: 0 0 50px;
}
#container .item-box {
    margin: 0;
}
#container .item-box ul {
    margin: 0 auto;
    padding: 0 0 3%;
    width: 70%;
}
#container .mainvisual p,
#container .last{
    line-height: 1.7;
    text-align: center;
    margin: 40px 10px;
}
#container .pricedown th.one{
    width: 68%;
}
#container .pricedown th.two{
    width: 12%;
}
#container .pricedown th.three{
    width: 14%;
}
}