@charset "UTF-8";
/*!
*/
/*
------------------------------------------------------------------------------------------------------------------------------------------------
* ----- 汎用コンポーネント -----
*
*
------------------------------------------------------------------------------------------------------------------------------------------------
*/
/* =========================================================
* 12グリッドシステム
* @ 12 GRID SYSTEM
* ====================================================== */
/* グリッド外枠 */
.grid_contents {
clear: both;
padding: 0px;
margin: 0px;
}
.groupSet:before,
.groupSet:after { content:""; display:table; }
.groupSet:after { clear:both;}
.groupSet { zoom:1; /* For IE 6/7 */ }
/* グリッドカラム共通 */
.grid_contents .grid_cols {
padding: 0 .8%;
}
.grid_contents.groupSet .grid_cols {
display: block;
float:left;
padding: 0 .8%;
}
.grid_contents.groupSetFix .grid_cols {
display: block;
float:left;
padding: 0 .8%;
}
.grid_contents .grid_cols.nopadding {
padding: 0;
}
.grid_contents .grid_cols-nomargin span {
display: block;
background-color: #fff;
}
/* グリッドの大きさ */
.grid_contents .grid_cols.grid-12 {
float: none;
width: 100%;
}
.grid_contents .grid_cols.grid-11 {
width: 91.6667%;
}
.grid_contents .grid_cols.grid-10 {
width: 83.3334%;
}
.grid_contents .grid_cols.grid-9 {
width: 75%;
}
.grid_contents .grid_cols.grid-8 {
width: 66.6667%;
}
.grid_contents .grid_cols.grid-7 {
width: 58.3329%;
}
.grid_contents .grid_cols.grid-6 {
width: 50%;
}
.grid_contents .grid_cols.grid-5 {
width: 41.6671%;
}
.grid_contents .grid_cols.grid-4 {
width: 33.3333%;
}
.grid_contents .grid_cols.grid-3 {
width: 25%;
}
.grid_contents .grid_cols.grid-2 {
width: 16.6666%;
}
.grid_contents .grid_cols.grid-1 {
width: 8.3333%;
}
/* タブレット */
@media only screen and (max-width: 768px) {
.grid_contents .grid_cols.grid-12-tablet {
float: none;
width: 100%;
}
.grid_contents .grid_cols.grid-11-tablet {
width: 91.6667%;
}
.grid_contents .grid_cols.grid-10-tablet {
width: 83.3334%;
}
.grid_contents .grid_cols.grid-9-tablet {
width: 75%;
}
.grid_contents .grid_cols.grid-8-tablet {
width: 66.6667%;
}
.grid_contents .grid_cols.grid-7-tablet {
width: 58.3329%;
}
.grid_contents .grid_cols.grid-6-tablet {
width: 50%;
}
.grid_contents .grid_cols.grid-5-tablet {
width: 41.6671%;
}
.grid_contents .grid_cols.grid-4-tablet {
width: 33.3333%;
}
.grid_contents .grid_cols.grid-3-tablet {
width: 25%;
}
.grid_contents .grid_cols.grid-2-tablet {
width: 16.6666%;
}
.grid_contents .grid_cols.grid-1-tablet {
width: 8.3333%;
}
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.grid_contents { margin: 0%; }
.grid_contents .grid_cols.grid-12, .grid_contents .grid_cols.grid-11, .grid_contents .grid_cols.grid-10,
.grid_contents .grid_cols.grid-9, .grid_contents .grid_cols.grid-8, .grid_contents .grid_cols.grid-7,
.grid_contents .grid_cols.grid-6, .grid_contents .grid_cols.grid-5, .grid_contents .grid_cols.grid-4,
.grid_contents .grid_cols.grid-3, .grid_contents .grid_cols.grid-2, .grid_contents .grid_cols.grid-1 {
width: 100%;
}
}
/* ----------------------------------------
グリッドのサンプル
---------------------------------------- */
/*
*/
/* =========================================================
* プロモーションダイヤ
* @ promotion_diamonds_component
* ====================================================== */
.groupSet .promotion_diamonds_component ,.groupSet .promotion_diamonds_component2{
/* 3列 width:33%; */
width:50%; /* 2列 */
float:left;
padding: 0 0.8%;
}
.promotion_diamonds_component ,.promotion_diamonds_component2{
margin-bottom:50px;
}
.promotion_diamonds_image {
position: relative;
width: 316px;
margin: 0 auto 20px;
}
.promotion_diamonds_image > img {
vertical-align: bottom;
}
.promotion_diamonds_icon {
position: absolute;
bottom: 0;
left: 50%;
width: 158px;
height: 158px;
margin-left: -79px;
}
.promotion_diamonds_icon img {
width: 100%;
vertical-align: top;
}
.promotion_diamonds_image + p {
margin-bottom: 20px;
font-size: 16px;
}
/* ----- / @media screen and (max-width:768px) ----- */
@media screen and (max-width: 768px) {
.promotion_diamonds_component {
padding: 0 0.8%;
}
.promotion_diamonds_image {
width: 100%;
}
.promotion_diamonds_image > img {
display: none;
}
.promotion_diamonds_icon {
position: static;
bottom: 0;
left: 0;
width: 100%;
height: auto;
margin-left: auto;
}
.promotion_diamonds_component2 .promotion_diamonds_image > img {
display: block;
width:100%;
}
.promotion_diamonds_component2 .promotion_diamonds_icon {
position: absolute;
bottom: 0;
left: 50%;
width: 80px;
height: 80px;
margin-left: -39px;
}
}
/* ----- / @media screen and (max-width:480px) ----- */
@media screen and (max-width: 480px) {
.groupSet .promotion_diamonds_component,.groupSet .promotion_diamonds_component2{
width:100%;
}
.promotion_diamonds_component2 .promotion_diamonds_icon {
position: absolute;
bottom: 0;
left: 50%;
width: 50%;
height: auto;
margin-left: -25%;
}
}
/* 計算メモ 10.05 Koizumi
@for $i from 1 through 100 {
$colw : 336px;
$colh : 336px;
$starttop : ($colh/2);
$startleft: ($colw/2);
i/5
.sub_rows .sub_col_{$i} {
position: absolute;
top: $starttop * $i;
left: $startleft * $i;
}
}
.sub_rows .sub_col_1 {
position: absolute;
top: 168px;
left: 168px;
}
.sub_rows .sub_col_2 {
position: absolute;
top: 168px;
left: 504px;
}
.sub_rows .sub_col_4 {
position: absolute;
top: 336px;
left: 0px;
}
.sub_rows .sub_col_3 {
position: absolute;
top: 336px;
left: 336px;
}
.sub_rows .sub_col_5 {
position: absolute;
top: 336px;
left: 672px;
}
.sub_rows .sub_col_6 {
position: absolute;
top: 504px;
left: 168px;
}
.sub_rows .sub_col_7 {
position: absolute;
top: 504px;
left: 504px;
}
.sub_rows .sub_col_9 {
position: absolute;
top: 672px;
left: 0px;
}
.sub_rows .sub_col_8 {
position: absolute;
top: 672px;
left: 336px;
}
.sub_rows .sub_col_10 {
position: absolute;
top: 672px;
left: 672px;
}
*/
@media screen and (max-width:480px) {
.promotion_diamonds_icon img {
width: 50%;
}
.promotion_diamonds_component{
margin-bottom:30px;
}
/* ----- / @media screen and (max-width:480px) ----- */
}