@charset "UTF-8";
/*======================================
初期化
=======================================*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote {
margin: 0;
padding: 0;
}
input, textarea {
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: normal;
}
img {
vertical-align: bottom;
}
hr {
display: none;
}

/*======================================
基本設定
=======================================*/
html {
max-width: 1600px;
margin: 0 auto;
}
body {
background:#FFF;
/* bodyに対してはMediumを指定 *//* 英文はセンチュリーゴシック系 */
font-family: Futura, 'Century Gothic' , "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic";
color:#777777;
font-size: 13px;
line-height: 2;
-webkit-text-size-adjust: 100%;/*スマホで勝手に文字が大きくなる対策*/
}
a:link{
color:#777777;
text-decoration:underline;
}
a:visited{
color:#777777;
text-decoration:underline;
}
a:hover {
color:#9d9d9d;
text-decoration:none;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}

/*======================================
ヘッダー
=======================================*/
/* introduction */
#introduction {
margin:0 auto;
width:1100px;
height: auto;
position: absolute;
top:362px;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
#introduction #wrapcopy #copy img {
position: relative;
}

/* 背景の指定 */
.top_bg{
overflow:hidden;
height:712px;
}
.top_bg .bgImg {
height:712px;
position   : absolute;
top        : 0;
left       : 0;
bottom     : 0;
right      : 0;
opacity    : 0;
animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
}
/* 段差で背景画像のアニメーションを実行 */
.top_bg .src1 {
background : url(../images/mv/main01.jpg); background-repeat:no-repeat;background-attachment: fixed;  /* 背景の画像を指定 */
}
.top_bg .src2 {
background : url(../images/mv/main02.jpg); background-repeat:no-repeat;background-attachment: fixed;  /* 背景の画像を指定 */
animation-delay  : 5s;
}
.top_bg .src3 {
background : url(../images/mv/main03.jpg); background-repeat:no-repeat;background-attachment: fixed;  /* 背景の画像を指定 */
animation-delay  : 10s;
}
.top_bg .src4 {
background : url(../images/mv/main04.jpg); background-repeat:no-repeat;background-attachment: fixed;  /* 背景の画像を指定 */
animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

/*======================================
ナビゲーション
=======================================*/
.globalMenuPc{width:100%; height:48px; padding:10px 0 0; margin:0; overflow:hidden; background:#fff; position:fixed; top:0; left:0; z-index:2;}
.globalMenuPc .wrap{width:1100px; margin:0 auto;}
.globalMenuPc .wrap .wraplink { line-height:2; text-decoration:none; padding:0 11px;}
h1#nav_logo{float:left; width:255px; margin:0 30px 0 30px;}

/*======================================
各共通項目
=======================================*/
section{text-align:center; padding:150px 120px;}
#profile p,#profile ul,#clients dl{text-align:left;}

/* 各背景設定 */
#concept {background-color:#FFF; clear:both; z-index:1; position:relative;}
#solution {background:url(../images/bg/bg02.jpg) center  fixed #6d2422;overflow:hidden;}
#profile {background:url(../images/bg/bg03.jpg) center no-repeat fixed #e6eaeb;clear:both;}
#clients {background:url(../images/bg/bg04.jpg) center fixed #d7dbde;}
#book {background:url(../images/bg/bg05.jpg) center fixed #eedbe1;}

/* 各タイトル周り設定 */
#concept h1{ padding-bottom:100px;}
#solution h1{ padding-bottom:50px;}
#profile h1{ padding-bottom:100px;}
#clients h1{ padding-bottom:50px;}
#book h1{ padding-bottom:50px;}

/* 白背景(半透明)等設定 */
#solution_set,#clients_set,#book_set{width:100%;background-color:rgba(255,255,255,0.9); margin:0 auto; padding:80px 0; overflow:hidden;}
#solution_set{padding:0; background-color:transparent;}

#profile p:last-child,#clients p:last-child{padding-bottom:0px;}

.english{
margin-top:30px;
color:#888;
font-size:95%;
word-spacing:50%;
}

/*======================================
コンセプト
=======================================*/
#concept h2,#concept p{padding-bottom:30px;}
#concept p:last-child{padding-bottom:0px;}

/*======================================
ソリューション
=======================================*/
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:300px;}
#solution dt {color:#333;}
#solution dt img{ margin-bottom:15px;}
#solution .solution_inside{ width:32%; float:left; margin:0 2% 0 0;}
#solution .solution_inside_last{ width:32%; float:left; margin:0;}
#solution dl dd{margin-top:35px; text-align:left;}
#solution dl dd.english{margin-top:40px; text-align:center;}
#solution_btn a{width:100%; display:block; text-align:center; background-color:#999; color:#FFF; padding:20px 0; margin-top:60px; line-height:1.8; text-decoration:none;}
#solution_btn a:hover{text-decoration: none; -moz-opacity: 0.85; opacity: 0.85;}

/*======================================
プロフィール
=======================================*/
#profile p,#profile ul{width:75%;margin:0 auto;}
#profile h2{padding-bottom:60px;}
#profile p,#profile ul{padding-bottom:30px;}
#profile ul {list-style:circle; padding-left:30px;}

/*======================================
クライアント
=======================================*/
#clients dl{width:75%;margin:0 auto;}
#clients dt{ font-size:110%;}
#clients h1 img{ margin-bottom:10px;}
#clients dd{ margin-bottom:15px;}
#clients dd:last-child{margin-bottom:0px;}

/*======================================
オリジナルブック
=======================================*/
#book h2,#book p{padding-bottom:30px;}
#book h2{color:#333;}
#book dl{ width:65%; padding:60px 4% 55px 5%; margin:30px auto 0; text-align:left;overflow:hidden; clear:both;}
#book dl dd strong{color:#333;}
#book dl dd.english strong{color:#777; font-size:110%; font-weight:normal;}
#book dl dd.sub{ font-size:95%; line-height:1.6; margin-top:10px;}
#book dl dt { float:left; width:20%;}
#book dl dd { float:right; width:75%;}
.shadow {filter: drop-shadow(3px 3px 5px #cdcdcd);}

/* カラーリング設定ss */
#book dl.ss{
background: -moz-linear-gradient(top right, #fbf6e6, #fae8f0); 
background: -webkit-linear-gradient(top right, #fbf6e6, #fae8f0); 
background: linear-gradient(to bottom left, #fbf6e6, #fae8f0); 
}
/* カラーリング設定aw */
#book dl.aw{
background: -moz-linear-gradient(top right, #e6fff8, #e7e6f7); 
background: -webkit-linear-gradient(top right, #e6fff8, #e7e6f7); 
background: linear-gradient(to bottom left, #e6fff8, #e7e6f7); 
}

/*======================================
フッター
=======================================*/
footer{
background:#FFF;
padding:35px 0 20px;
clear:both;
}
#bottom_footer p#copyright{
text-align:center;
margin-top:20px;
font-size:90%;
}
.pagetop {
position: fixed;
bottom: 20px;
right: 20px;
z-index:5;
}

/*======================================
レスポンシブ設定
=======================================*/

br.sp_only,br.tb_only{display: none;}
br.pc_only,span.pc_only{display: inline-block;}
img.sp{display: none;}
.hamburger,.globalMenuSp{display: none;}

@media (min-width: 1598px) {
/*横幅が1598px以上の場合に適用するスタイル */
.top_bg .src1,.top_bg .src2,.top_bg .src3,.top_bg .src4 {background-position:top center;}
}

@media only screen and (max-width: 1100px){
/* PC用ボタンを消す他 */
#introduction {width:100%;}
.globalMenuPc{display: none;}
.globalMenuSp{display: inline;}
/*0517追加修正*/
.globalMenuSp {visibility: hidden;}
.globalMenuSp.active {opacity: 100;visibility: visible;}
/*0517追加修正*/
#nav_logo{
display : block;
position: fixed;
z-index : 4;
left : 0px;
top   : 12px;
width : 42px;
height: 42px;
}
/* ハンバーガーボタン */
.hamburger {
display : block;
position: fixed;
z-index : 4;
right : 10px;
top   : 6px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;
position: absolute;
width   : 30px;
height  : 2px ;
left    : 6px;
background : #2c2c2c;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {top: 10px;}
.hamburger span:nth-child(2) {top: 20px;}
.hamburger span:nth-child(3) {top: 30px;}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
background :#fff;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}
nav.globalMenuSp {
position: fixed;
z-index : 3;
top  : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}
nav.globalMenuSp ul {
margin: 46px auto 0;
padding: 0;
width: 100%;
}
nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}
nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
letter-spacing:2px;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
opacity: 100;
}
}

@media only screen and (max-width: 1280px){
#book dl{ width:78%;}
#book dl dt { float:none; width:100%; text-align:center; padding-bottom:15px;}
#book dl dd { float:none; width:86%; margin:0 auto;}
#book dl dd.book_title{ text-align:center; padding-bottom:40px;}
#book dd.english{ margin-top:26px;}
}

@media only screen and (max-width: 1320px){
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:310px;}
}

@media only screen and (max-width: 1300px){
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:350px;}
}

@media only screen and (max-width: 1100px){
.top_bg .src1,.top_bg .src2,.top_bg .src3,.top_bg .src4 {background-position:top center;}
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:350px;}
br.tb_only{display: inline-block;}
section{text-align:center; margin:0 auto; padding:100px 40px;}
}

@media only screen and (max-width: 980px){
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:380px;}
br.tb_only{display: inline-block;}
}

@media only screen and (max-width: 900px){
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:400px;}
br.tb_only{display: inline-block;}
}

@media only screen and (max-width: 795px){
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:430px;}
br.tb_only{display: inline-block;}
}

@media only screen and (max-width: 640px){
body {
font-size: 14px;
line-height: 1.7;
-webkit-text-size-adjust: 100%;/*スマホで勝手に文字が大きくなる対策*/
}
img.fade{ width:100%; height:auto;}
#yohakuchousei{ height:500px;}
#solution {background:url(../images/bg/bg02.jpg) center repeat;overflow:hidden;}
#profile {background:url(../images/bg/bg03.jpg) center no-repeat bottom;clear:both;}
#clients {background:url(../images/bg/bg04.jpg) center repeat;}
#book {background:url(../images/bg/bg05.jpg) center repeat;}
section{text-align:center; margin:0 auto; padding:100px 0;}
br.sp_only{display:inline-block;}
br.pc_only,span.pc_only,br.tb_only{display:none;}
#concept p.english{ width:78%; margin:30px auto 0; text-align:left;}
#solution_set,#clients_set,#book_set{width:88%;background-color:rgba(255,255,255,0.9); margin:0 auto; padding:80px 0; overflow:hidden;}
#solution_set{padding:0; background-color:transparent;}
#solution .solution_inside{ width:100%; margin:0 auto 30px;}
#solution .solution_inside_last{ width:100%; margin:0 auto;}
#solution dl{ padding:50px 10%; background-color:rgba(255,255,255,0.9);min-height:0px;}
#solution dl dd.english{margin-top:40px; text-align:left;}	
#solution_btn a{margin-top:0px;}
#profile p,#profile ul{width:80%;margin:0 auto;}
img.pc{display: none;}
img.sp{display: inline;}
#book dl{ width:82%;}
#book dl dt { float:none; width:100%; text-align:center; padding-bottom:15px;}
#book dl dd { float:none; width:86%; margin:0 auto;}
#book dl dd.book_title{ text-align:center; padding-bottom:40px;}
#book p.english{ text-align:left; width:70%; margin:0 auto;}
#book dd.english{ margin-top:0px;}
#introduction,.globalMenuPc .wrap{ width:100%;}
p.pagetop img { display:none;}
}