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

html, body { height: 100%; }

body {
    color: #281e14;
    margin: 0;
    padding: 0;
    font-family: "Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
    font-size: 120%;
    line-height: 220%;
    text-align: center;
    letter-spacing: 0.03em;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* フォントサイズをスマホ側で自動調整しない */
    }

footer { width: 100%; margin: 80px 0 60px 0; }

.box { max-width: 900px; margin: auto; padding: 10px 20px; }


a { text-decoration: none; transition: 0.4s; }
a:link { color: #281e14; }
a:visited { color: #281e14; }
a:hover,
a:active { color: #d7df23; }

table { border-spacing: 0; border-collapse: collapse; }

td, th { border: 0px none; padding: 0 }

img { max-width: 100%; height: auto; border: none; margin: auto; }


p { margin: 30px 0; text-align: left; }


ul { margin: 0; padding: 0; }

li { display: inline-block; }

.list li { display: list-item; margin-left: 1em; text-align: left; }

.li-center { display: inline-block; }


hr { border-top: 1px solid #ccc; margin: 60px 0; }


h1, h2, h3 { letter-spacing: 0.1em; }

h1 { font-size: 150%; margin: 60px 0; line-height: 150%; }

h2 { font-size: 120%; margin: 40px 0 30px 0; letter-spacing: 0.01em; }

h3 { font-size: 180%; margin-bottom: 30px; font-weight: normal; }


/* -----------------------------------------------------------------------------------------------------------------WEB FONT */

         
@font-face {
  font-family: Symbol;
  src: url('../font/symbol.ttf'),
  url('../font/symbol.eot');
  }

.links { font-family: Symbol; font-size: 60px; line-height: 1; margin-bottom: 40px; }

.links li { margin: 0 10px; }

/* ------------------------------------------------------------------------------------------------------ 共通 */


.space { margin-bottom: 30px; }


.L { float: left; }

.R { overflow: hidden; }

.R2 { overflow: hidden; }


.center { text-align: center; }

.left { text-align: left; }

.right { text-align: right; }


.c1 { color: #f33; }


.text { line-height: 200%; }

.clear { clear: both; }

.block { display: block; }


.gallery img:hover { opacity: 0.3; filter: alpha(opacity=30); transition: 0.4s; }


/* ------------------------------------------------------------------------------------------------------- TOP */


#intro {
    position: absolute;
    top: 100px;
    left: 50px;
    font-weight: bold;
    text-align: left;
    z-index: 30;
    }
    
.top1 { font-size: 300%; line-height: 1.2; margin-bottom: 30px; }

.top2 { font-size: 150%; line-height: 1.5; font-weight: normal; }

.copy { text-align: center; }


/* ------------------------------------------------------------------------------------------------------- SBC */


#solution .R { float: right; }

.off { font-size: 400%; font-weight: bold; }


/* ------------------------------------------------------------------------------------------------------- POM */


#scene h2 { text-align: left; margin-bottom: 0; }

.why { margin-top: 30px; }

#voice .right { margin-top: -30px; }

 
/* ------------------------------------------------------------------------------------------------------- エキス */


#extract p { margin-bottom: 5px; line-height: 1.5; }

#extract L { float: left; }

#extract R { display: inline-block; }

#extract img { margin-right: 10px; }

#extract .bd { font-weight: bold; color: #f33; }

#extract .clear { margin-bottom: 10px; }


/* ------------------------------------------------------------------------------------------------------- ボタン */

.btn {
  display: inline-block;
  margin: 10px;
  border: solid 2px #d7df23;
  padding: 20px 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  }

.btn2 {
  position: fixed;
  bottom: 30px;
  left: 10px;
  }

.btn2 li a:link {
  vertical-align: middle;
  padding: 20px;
  margin-right: 10px;
  line-height: 130%;
  color: #fff;
  background: #0cf;
  border: solid 1px #0cf;
  font-weight: bold;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  z-index: 10;
  }

.btn2 li a:hover { color: #0cf; background: #fff; border: solid 1px #0cf; transition: 0.4s; }



    
/* ------------------------------------------------------------------------------------------------------- 背景 */


.bg-green { background: #d7df23; padding: 60px; }

.bg-green h1 { margin: 0; }


.bg {
  display: table;
  width: 100%;
  height: 500px;
  }

.bg1 { background: url('../img/bg_1.jpg') center center / cover no-repeat; }

.bg2 { background: url('../img/bg_2.jpg') center center / cover no-repeat; }

.bg3 { background: url('../img/bg_3.jpg') center center / cover no-repeat; }

.bg4 { background: url('../img/bg_4.jpg') center center / cover no-repeat; }

.bg5 { background: url('../img/bg_5.jpg') center left / cover no-repeat; }

.bg6 { background: url('../img/bg_6.jpg') center center / cover no-repeat; }

.bg7 { background: url('../img/bg_7.jpg') center center / cover no-repeat; }

.bgl { display: table-cell; vertical-align: middle; padding-left: 100px; font-size: 160%; font-weight: bold; line-height: 130%; text-align: left; }

.bgr { display: table-cell; vertical-align: middle; padding-right: 100px; font-size: 160%; font-weight: bold; line-height: 130%; text-align: right; }

.green { color: #d7df23; }

.white { color: #fff; }


/* ------------------------------------------------------------------------------------------------------- 四角 */


#square li { padding: 1px; margin-bottom: -15px; font-size: 120%; }

.square {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    height: 300px;
    background-color: #d7df23;
    font-weight: bold;
    }


/* ------------------------------------------------------------------------------------------------------- 円 */


.circle-center { display: table; margin: auto; padding-bottom: 20px; }

.circle {
    background: #d7df23;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    }
    
.no { width: 120px; height: 120px; line-height: 1; }

.sbc { width: 300px; height: 280px; font-size: 140%; line-height: 1.5; }
    
    
.price {
    width: 300px;
    height: 300px;
    font-size: 150%;
    font-weight: bold;
    line-height: 1.5;
    }


/* ------------------------------------------------------------------------------------------------------- シグナル　必ず「Slide Show」より上に記述 */

.ripple {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 80px;
    margin: 20px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(255,255,255,1);
    animation: rippleAnimation 4s ease-out infinite;
    -webkit-animation: rippleAnimation 4s ease-out infinite;
    }

@keyframes rippleAnimation {
    0% { ransform: scale(1, 1); opacity: 1; }
    100% { transform: scale(2.5, 2.5); opacity: 0; }
    }
    
@-webkit-keyframes rippleAnimation {
    0% { -webkit-transform: scale(1, 1); opacity: 1; }
    100% { -webkit-transform: scale(2.5, 2.5); opacity: 0; }
    }


/* ------------------------------------------------------------------------------------------------------- 動く矢印　必ず「Slide Show」より上に記述 */


.arrow {
	position: absolute;
	left: 50%;
	bottom: 30px;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border-left: 4px solid #000;
	border-bottom: 4px solid #000;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite;
	z-index: 30;
	}

@keyframes arrow {
	0% { transform: rotate(-45deg) translate(0, 0); }
	20% { transform: rotate(-45deg) translate(-10px, 10px); }
	40% { transform: rotate(-45deg) translate(0, 0); }
	}

@-webkit-keyframes arrow {
	0% { -webkit-transform: rotate(-45deg) translate(0, 0); }
	20% { -webkit-transform: rotate(-45deg) translate(-10px, 10px); }
	40% { -webkit-transform: rotate(-45deg) translate(0, 0); }
	}


/* ------------------------------------------------------------------------------------------------------------------- Slide Show */


.pcontainer { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 20; background: #fff; }

/* 各スライドdivの背景画像設定 */

#photo1 { background-image: url('../img/01.jpg'); }
#photo2 { background-image: url('../img/02.jpg'); }
#photo3 { background-image: url('../img/03.jpg'); }
#photo4 { background-image: url('../img/04.jpg'); }

/* 全スライド共通のstyleとanimationの設定 */

.frame { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center top;
	opacity: 0;
	animation: imgTrans 24s infinite;    /* 1ループ24秒のアニメを繰り返す */
	-webkit-animation: imgTrans 24s infinite;
	}

/* 各スライドのanimationに時間的ずれを設定 */

#photo2 { animation-delay: 6s; }
#photo3 { animation-delay: 12s; }
#photo4 { animation-delay: 18s; }

/* スライドのFadeIn,FadeOutのanimation設定 */

@keyframes imgTrans {
 0%   { opacity: 0; }    /* 透明からフェードイン */
 10%   { opacity: 1; }   /* ここから... */
 20%  { opacity: 1; }    /* ここまで表示 ここから... */
 50%  { opacity: 0; }    /* ここまてフェードアウト */
 100% { opacity: 0; }    /* 100%で完全に消す */
}
@-webkit-keyframes imgTrans {
 0%   { opacity: 0; }
 10%   { opacity: 1; }
 20%  { opacity: 1; }
 50%  { opacity: 0; }
 100% { opacity: 0; }
}

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

#photo1 { background-image: url('../img/s01.jpg'); }
#photo2 { background-image: url('../img/s02.jpg'); }
#photo3 { background-image: url('../img/s03.jpg'); }
#photo4 { background-image: url('../img/s04.jpg'); }

}


/* ------------------------------------------------------------------------------------------------------------------- トップへもどるボタン */


#page-top {
  position: fixed;
  right: 40px;
  margin-bottom: 10px; 
  width: 25px;
  height: 25px; 
  border-left: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  }

#page-top:hover { opacity: 0.3; filter: alpha(opacity=30); transition: 0.4s; }


/* ------------------------------------------------------------------------------------------------------------------- 640より小さい場合 */


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

body {
    font-size: 100%;
    line-height: 180%;
    }


#page-top { display: none; }


.box { padding: 15px; }

h1, h2, h3 { letter-spacing: 0.03em; }

h1 { font-size: 100%; margin: 30px 0; line-height: 150%; }

h2 { font-size: 100%; line-height: 120%; }

.L { float: left; width: 100%; }

.R { width: 100%; margin-left: 10px; }

#solution .R { width: 50%; margin-right: 60px; }

.links { margin-top: 40px; }


/* ★ TOP */


#intro {
    top: 240px;
    left: 0;
    margin: 20px;
    }
    
.top1 { font-size: 160%; margin-bottom: 30px; }

.top2 { font-size: 110%; }


/* ★ シグナル */

.ripple {
    width: 180px;
    height: 180px;
    left: 50%;
    margin-left: -90px;
    }


/* ★ SBC */

.off { font-size: 220%; font-weight: bold; }

.price { font-size: 120%; }


/* ★ POM */

#extract .L { text-align: left; }

.why { margin-top: 10px; text-align: left; }

.buy { 
    padding: 20px;
    font-size: 100%;
    }

/* ★ ボタン */

.btn { width: 300px; }

.btn2 { bottom: 20px; left: 10px; }

.btn2 li a:link { padding: 10px; font-weight: normal; font-size: small; }



/* ★ 四角 */


#square { margin-left: 0; }

#square li { display: list-item; list-style: none; margin-bottom: 10px; font-size: 110%; }

.square { width: 500px; height: auto; padding: 10px; }


/* ★ 背景 */


.bg-green { padding: 20px; }

.bg { height: 300px; }


.bg1 { background-position: left center; }

.bg2 { background-position:  center; }

.bg3 { background-position:  center; }

.bg4 { background-position:  center; }

.bg5 { background-position: left center; }

.bg6 { background-position:  center; }

.bg7 { background-position:  center; }


.bgl { font-size: 100%; top: 45%; left: 5%; }

.bgr { font-size: 100%; top: 45%; right: 5%; }


/* ★ 動く矢印 */

.arrow {
	bottom: 30px;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	border-left: 3px solid #fff;
	border-bottom: 3px solid #fff;
	}

}