@charset 'UTF-8';
/*==========================================================================
mixin
===========================================================================*/
/*--------------------------------------------------------------------------
html
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
head
---------------------------------------------------------------------------*/
head {
font-family: 'pc';
}
/*--------------------------------------------------------------------------
body
---------------------------------------------------------------------------*/
body {
min-width: 1200px;
color: #222;
font-family: '繝偵Λ繧ｮ繝手ｧ偵ざ繧ｷ繝�け', 'Hiragino Kaku Gothic Pro', '繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3', '繝｡繧､繝ｪ繧ｪ', 'Meiryo', '�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け', Osaka, Verdana, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 2.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*--------------------------------------------------------------------------
a
---------------------------------------------------------------------------*/
a {
color: inherit;
outline: none;
-webkit-tap-highlight-color: transparent;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover img {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.select_navigation span:hover{
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
/*--------------------------------------------------------------------------
reset
---------------------------------------------------------------------------*/
img {
vertical-align: top;
}
ul {
list-style: none;
}
/*--------------------------------------------------------------------------
selection
---------------------------------------------------------------------------*/
::-moz-selection {
background-color: #b3d4fc;
color: #fff;
text-shadow: none;
}
::selection {
background-color: #b3d4fc;
color: #fff;
text-shadow: none;
}
/* ----------------------------------------------------------------------------------------------------
Super Form Reset
A couple of things to watch out for:
- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
----------------------------------------------------------------------------------------------------*/
input,
label,
select,
button,
textarea {
display: inline-block;
margin: 0;
padding: 0;
border: 0;
background: none;
vertical-align: middle;
white-space: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Remove the stupid outer glow in Webkit */
input:focus,
select:focus,
textarea:focus {
outline: 0;
}
/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input,
textarea {
box-sizing: content-box;
}
/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select {
box-sizing: border-box;
}
/* Text Inputs
-----------------------------------------------*/
/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio] {
width: 13px;
height: 13px;
}
/* File Uploads
-----------------------------------------------*/
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search] {
-webkit-box-sizing: content-box;
-webkit-appearance: textfield;
}
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration {
display: none;
}
/* Buttons
-----------------------------------------------*/
button,
input[type='reset'],
input[type='button'],
input[type='submit'] {
/* Fix IE7 display bug */
overflow: visible;
width: auto;
}
/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button {
padding: 0;
border: 0;
background: none;
}
/* Textarea
-----------------------------------------------*/
textarea {
/* Turn off scroll bars in IE unless needed */
overflow: auto;
/* Move the label to the top */
vertical-align: top;
}
/* Selects
-----------------------------------------------*/
select[multiple] {
/* Move the label to the top */
vertical-align: top;
}
/*==========================================================================
mixin
===========================================================================*/
/*--------------------------------------------------------------------------
l-page
---------------------------------------------------------------------------*/
.l-page-wrapper {
overflow: hidden;
}
.sec_all{
position: relative;
padding-top: 95px;
min-width: 1430px;
}
.sec_all::before {
content: "";
display: block;
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
background:url(../img/bg_left.png) left top repeat-y;
z-index: -200;
}
.sec_all::after {
content: "";
display: block;
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
background:url(../img/bg_right.png) right top repeat-y;
z-index: -500;
}
/*--------------------------------------------------------------------------
MV
---------------------------------------------------------------------------*/
.sec-mv-wrapper {
position: relative;
overflow: hidden;
background: url(../img/dot.png) left top repeat;
}
.sec-mv-wrapper h1{
position: absolute;
left: 50px;
top:0;
}
#video-background {
/* 蜍慕判繧定レ譎ｯ縺ｫ險ｭ螳壹☆繧九せ繧ｿ繧､繝ｫ繧ｷ繝ｼ繝� */
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
.sec-mv-wrapper .catch{
max-width: 517px;
width:43%;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
text-align: center;
}
.sec-mv-wrapper .catch span{
display: block;
}
.sec-mv-wrapper .y-btn p:first-child{
max-width: 152px;
width:9.6%;
position: absolute;
left: 50%;
top:70%;
transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
}
.sec-mv-wrapper .y-btn p:last-child{
max-width: 116px;
width:12.6%;
position: absolute;
left: 50%;
top:74%;
transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
}
.sec-mv-wrapper .img_scroll{
max-width: 58px;
width:4.8%;
position: absolute;
left: 50%;
bottom:0%;
transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
}
.sec-mv-wrapper .catch img,
.sec-mv-wrapper .y-btn img,
.sec-mv-wrapper .img_scroll img{
width: 100%;
}
.sns{
position: fixed;
left: 50px;
bottom:37px;
z-index: 100;
}
.sns li{
line-height: 1;
margin-bottom: 13px;
}
/* =========================================================
select_navigation
========================================================= */
.select_navigation {
position:fixed;
right:50px;
z-index:1000;
width:55px;
}
.select_navigation span {
display:block;
width:55px;
height:48px;
margin:1px 0 0;
}
.select_navigation span.first {
margin:0;
}
.select_navigation span a {
cursor:pointer;
width:55px;
height:48px;
display:block;
background:url(../img/select_link_ver01.png) left top no-repeat;
}
.select_navigation span.select1 a {
background-position:0 -48px;
}
.select_navigation span.select2 a {
background-position:0 -95px;
}
.select_navigation span.select3 a {
background-position:0 -142px;
}
.select_navigation span.select4 a {
background-position:0 -190px;
}
.select_navigation span.select5 a {
background-position:0 -237px;
}
.select_navigation span.first a{
background-position:0 0;
}
.select_navigation span.last a{
/*background-position:0 -215px;*/
}
.select_navigation span.select1 a.active {
background-position:-58px -48px;
}
.select_navigation span.select2 a.active {
background-position:-58px -95px;
}
.select_navigation span.select3 a.active {
background-position:-58px -142px;
}
.select_navigation span.select4 a.active {
background-position:-58px -190px;
}
.select_navigation span.select5 a.active {
background-position:-58px -237px;
}
.select_navigation span.first a.active {
background-position:-58px 0;
}
.select_navigation span.last a.active {
/*background-position:-55px -215px;*/
}
/*==========================================================================
mixin
===========================================================================*/
/*--------------------------------------------------------------------------
l-wrap
---------------------------------------------------------------------------*/
.l-wrap {
position: relative;
width: 1160px;
margin: 0 auto;
}
/*--------------------------------------------------------------------------
inner
---------------------------------------------------------------------------*/
.inner {
width: 1200px;
margin: 0 auto;
}
/*--------------------------------------------------------------------------
TEXT
---------------------------------------------------------------------------*/
/*
note
-- 謾ｹ陦梧凾縲∽ｸ譁�ｭ礼岼縺ｫ菴咏區
*/
.mi-note,
.mi-list-note li {
padding-left: 1em;
text-indent: -1em;
}
/* =========================================================
section01
========================================================= */
.section01{
position: relative;
overflow: hidden;
margin-bottom: 150px;
}
.section01 .title{
width: 600px;
float: left;
position: relative;
}
.section01 .title h3{
position: absolute;
left: 0;
top:0;
}
.section01 .title .tit{
margin: 28px 0 44px 100px;
}
.section01 .title .subtit{
margin: 0 0 57px 100px;
}
.section01 .title .txt{
margin: 0 50px 0 0;
font-size: 105%;
letter-spacing: 0.12em;
}
.section01 .imgArea{
width: 560px;
float: right;
margin-right: -10px;
padding-bottom: 10px;
background:url(../img/bg_img_01.png) right 10px no-repeat;
}
.section01 .imgArea p:first-child{
margin-bottom: 6px;
}
/* =========================================================
section02
========================================================= */
.section02{
position: relative;
overflow: hidden;
margin-bottom: 130px;
}
.section02 .imgArea{
width: 560px;
float: left;
padding-bottom: 10px;
background:url(../img/bg_img_02.png) right 27px no-repeat;
}
.section02 .title{
width: 550px;
float: right;
position: relative;
}
.section02 .title h3{
position: absolute;
left: 0;
top:0;
}
.section02 .title .tit{
margin: 28px 0 44px 100px;
}
.section02 .title .subtit{
margin: 0 0 40px 100px;
}
.section02 .title .txt{
margin: 0 0 0 0;
font-size: 105%;
letter-spacing: 0.12em;
}
.sec02_foot{
clear: both;
position: relative;
overflow: hidden;
height: 764px;
}
.sec02_foot .inner{
background:url(../img/bg_gray.png) left top repeat;
height: 704px;
position: relative;
margin-top: 60px;
}
.sec02_foot .inner .sec03_conts{
width: 495px;
height: 205px;
position: relative;
background: #FFF;
}
.sec02_foot .inner .sec03_conts{
width: 495px;
height: 205px;
position: relative;
background: #FFF;
padding: 45px 0;
z-index: 10;
}
.sec02_foot .inner .sec03_conts .imgs{
margin: 10px 0 0 75px;
float: left;
}
.sec02_foot .inner .sec03_conts .title{
width: 260px;
float: right;
line-height: 1;
}
.sec02_foot .inner .sec03_conts .title p:first-child{
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
color: #f30000;
}
.sec02_foot .inner .sec03_conts .title p:nth-child(2){
line-height: 1.8;
}
.sec02_foot .inner .sec03_conts:first-child{
position: absolute;
left: 50%;
top:0;
-moz-transition: -moz-transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
-o-transition: -o-transform .5s ease-out;
-ms-transition: -ms-transform .5s ease-out;
transition: transform .5s ease-out;
/*-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);*/
/*transform: translate(-50%,60px);
-ms-transform: translate(-50%,60px);*/
}
.sec02_foot .inner.is-show01 .sec03_conts:first-child{
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.sec02_foot .inner .sec03_conts:first-child .imgs{
margin: 10px 0 0 75px;
}
.sec02_foot .inner .sec03_conts:nth-child(2){
position: absolute;
left: 90px;
top: 380px;
-moz-transition: -moz-transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
-o-transition: -o-transform .5s ease-out;
-ms-transition: -ms-transform .5s ease-out;
transition: transform 2s ease-out;
/*-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);*/
}
.sec02_foot .inner.is-show02 .sec03_conts:nth-child(2){
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.sec02_foot .inner .sec03_conts:nth-child(2) .imgs{
margin: 0 0 0 60px;
}
.sec02_foot .inner .sec03_conts:nth-child(3){
position: absolute;
left: 610px;
top: 380px;
-moz-transition: -moz-transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
-o-transition: -o-transform .5s ease-out;
-ms-transition: -ms-transform .5s ease-out;
transition: transform .5s ease-out;
/*-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);*/
}
.sec02_foot .inner.is-show03 .sec03_conts:nth-child(3){
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.sec02_foot .inner .sec03_conts:nth-child(3) .imgs{
margin: 23px 0 0 65px;
}
.sec02_foot .inner::after{
content: "";
display: block;
position: absolute;
top: 62px;
left: 311px;
width: 570px;
height: 570px;
border-radius: 50%;
border: 1px solid #f30000;
opacity: 0;
-webkit-transition: opacity 1000ms;
transition: opacity 1000ms
}
.sec02_foot .inner.is-show:after {
opacity: 1;
}
.sec02_foot .inner::before{
content: "";
display: block;
position: absolute;
top: 248px;
left: 534px;
width: 132px;
height: 171px;
background:url(../img/sec3_img_04.png) left top repeat;
z-index: 20;
opacity: 0;
-webkit-transition: opacity 1000ms;
transition: opacity 1000ms;
}
.sec02_foot .inner.is-show:before {
opacity: 1;
}
/* =========================================================
section03
========================================================= */
.section03{
position: relative;
overflow: hidden;
margin-top: 95px;
margin-bottom: 150px;
}
.section03 .title{
width: 600px;
float: left;
position: relative;
}
.section03 .title h3{
position: absolute;
left: 0;
top:0;
}
.section03 .title .tit{
margin: 28px 0 44px 100px;
}
.section03 .title .txt{
margin: 0 0 0 100px;
font-size: 105%;
letter-spacing: 0.12em;
}
.section03 .imgArea{
width: 560px;
float: right;
margin-right: -10px;
padding-bottom: 10px;
background:url(../img/bg_img_01.png) right 10px no-repeat;
}
.section03 .imgArea p:first-child{
margin-bottom: 6px;
}
.section03::before {
/*content: "";
display: block;
position: absolute;
left: 0;
top:-600px;
width: 100%;
height: 1000px;
-webkit-transform: skew(0deg, -15deg);
background: #FFF;
z-index: -1;*/
}
.section03::after {
/*content: "";
display: block;
position: absolute;
left: 0;
top:400px;
width: 100%;
height: 100%;
z-index: -2;
*/
}
.section03 .bg-image{
clear: both;
width: 100%;
height: 100%;
-webkit-transform: skew(0deg, -15deg);
-ms-transform: skew(0deg, -15deg);
background: #F00;
overflow: hidden;
z-index: -2;
position: absolute;
top:395px;
}
.section03 .bg-image span{
width: 100%;
height: 100%;
display: block;
background:url(../img/bg_red.png) left top repeat;
-webkit-transform: skew(0deg, 15deg);
-ms-transform: skew(0deg, 15deg);
position: relative;
top:-400px;
}
.section03 .listArea {
clear: both;
padding-top: 60px;
margin-bottom: 106px;
}
.section03 .listArea-inner {
width: 1200px;
height: 1200px;
margin: 0 auto;
overflow: hidden;
}
.section03 .listArea-inner .list-cont{
width: 393px;
background: #FFF;
text-align: center;
float: left;
margin: 0 0 10px 10px;
min-height: 590px;
position: relative;
}
.section03 .listArea-inner .list-cont:first-child,
.section03 .listArea-inner .list-cont:nth-child(4){
margin: 0 0 10px 0;
}
.section03 .listArea-inner .list-cont h4{
margin: 50px 48px 15px 48px;
}
.section03 .listArea-inner .list-cont p:nth-child(2){
font-weight: bold;
font-size: 22px;
margin-bottom: 15px;
}
.section03 .listArea-inner .list-cont p:nth-child(3){
font-weight: bold;
color: #f30000;
font-size: 16px;
margin-bottom: 15px;
line-height: 1.4;
}
.section03 .listArea-inner .list-cont p.list-btn{
background: #2d2d2d;
color: #FFF;
text-align: center;
width: 297px;
position: absolute;
left: 48px;
bottom: 50px;
font-weight: bold;
}
.section03 .listArea-inner .list-cont p.list-btn:hover{
background: #5B5B5B;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.section03 .listArea-inner .list-cont p.list-btn a{
display: block;
padding: 15px 0;
}
.section03 .listArea-inner .list-cont p.list-btn a:link:after {
content: '';
display: inline-block;
height: 11px;
width: 13px;
background: url(../img/ico_link01.png) right 0 no-repeat;
position: absolute;
right: 22px;
top: 50%;
margin-top: -6px;
}
.section03 .listArea-inner .list-cont p.list-btn:hover a:link:after {
background: url(../img/ico_link01_2.png) right 0 no-repeat;
}
/* =========================================================
section04
========================================================= */
.section04{
position: relative;
overflow: hidden;
margin-bottom: 130px;
}
.section04 .imgArea{
width: 560px;
float: left;
padding-bottom: 10px;
background:url(../img/bg_img_02.png) right 10px no-repeat;
}
.section04 .imgArea p:first-child{
margin-bottom: 6px;
}
.section04 .title{
width: 550px;
float: right;
position: relative;
}
.section04 .title h3{
position: absolute;
left: 0;
top:0;
}
.section04 .title .tit{
margin: 28px 0 44px 100px;
}
.section04 .title .subtit{
margin: 0 0 40px 100px;
}
.section04 .title .txt{
margin: 0 0 0 0;
font-size: 105%;
letter-spacing: 0.12em;
}
.sec04_foot{
clear: both;
position: relative;
overflow: hidden;
}
.sec04_foot .inner{
background:url(../img/bg_gray.png) left top repeat;
overflow: hidden;
margin-top: 60px;
padding: 80px 80px 13px 80px;
}
.sec04_foot .inner .sec04_conts{
width: 500px;
margin-bottom: 67px;
float: left;
position: relative;
}
.sec04_foot .inner .sec04_conts:nth-child(2),
.sec04_foot .inner .sec04_conts:nth-child(4)
{
float: right;
}
.sec04_foot .inner .sec04_conts .imgs{
width: 223px;
float: left;
position: relative;
}
.sec04_foot .inner .sec04_conts .imgs span{
width: 223px;
height: auto;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.sec04_foot .inner .sec04_conts .title{
width: 235px;
float: right;
position: static;
}
.sec04_foot .inner .sec04_conts .title p:nth-child(1){
font-weight: bold;
color: #f30000;
font-size: 20px;
margin-bottom: 20px;
line-height: 1.4;
}
.sec04_foot .inner .sec04_conts .title p:nth-child(2){
line-height: 2;
}
.sec04_foot .inner .sec04_conts .title p.list-btn{
border: 1px solid #f30000;
color: #f30000;
text-align: center;
width: 210px;
position: absolute;
left: 267px;
bottom: 0;
font-weight: bold;
}
.sec04_foot .inner .sec04_conts .title p.list-btn:hover{
border: 1px solid #FC8483;
color: #FC8483;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.sec04_foot .inner .sec04_conts .title p.list-btn a{
display: block;
padding: 10px 0;
}
.sec04_foot .inner .sec04_conts .title p.list-btn a:link:after {
content: '';
display: inline-block;
height: 11px;
width: 13px;
background: url(../img/ico_link02.png) right 0 no-repeat;
position: absolute;
right: 22px;
top: 50%;
margin-top: -6px;
}
.sec04_foot .inner .sec04_conts .title p.list-btn:hover a:link:after {
background: url(../img/ico_link02_2.png) right 0 no-repeat;
}
/* =========================================================
section05
========================================================= */
.section05{
position: relative;
overflow: hidden;
}
.section05 .title{
width: 600px;
float: left;
position: relative;
}
.section05 .title h3{
position: absolute;
left: 0;
top:0;
}
.section05 .title .tit{
margin: 28px 0 44px 100px;
}
.section05 .title .subtit{
margin: 0 0 40px 100px;
}
.section05 .title .txt{
margin: 0 50px 0 0;
font-size: 105%;
letter-spacing: 0.12em;
}
.section05 .imgArea{
width: 560px;
float: right;
margin-right: -10px;
padding-bottom: 10px;
background:url(../img/bg_img_01.png) right 10px no-repeat;
}
.section05 .imgArea p:first-child{
margin-bottom: 6px;
}
.section05 .inner{
z-index: 3;
}
.sec05_foot{
clear: both;
position: relative;
z-index: 3;
padding-top: 60px;
}
.sec05_foot .inner{
background:url(../img/bg_gray.png) left top repeat;
overflow: hidden;
padding: 50px 50px 20px 50px;
}
.sec05_foot .inner .sec05_conts{
position: relative;
margin-bottom: 30px;
}
.sec05_foot .inner .sec05_conts .imgs{
}
.sec05_foot .inner .sec05_conts .title{
position: absolute;
right: 52px;
top: 57px;
width: 455px;
height: 395px;
background: #FFF;
text-align: left;
}
.sec05_foot .inner .sec05_conts .title-2,
.sec05_foot .inner .sec05_conts .title-2{
right: 0;
left: 55px;
top: 56px;
}
.sec05_foot .inner .sec05_conts .title p:first-child{
margin: 55px 50px 30px 50px;
font-size: 24px;
font-weight: bold;
line-height: 1;
}
.sec05_foot .inner .sec05_conts .title p:nth-child(2){
margin: 0 50px 15px 50px;
font-size: 18px;
color: #f30000;
font-weight: bold;
line-height: 1;
}
.sec05_foot .inner .sec05_conts .title p:nth-child(3){
margin: 0 50px 30px 50px;
}
.section05 .pos-re{
clear: both;
position: relative;
z-index: 1;
}
.section05 .bg-image{
clear: both;
width: 100%;
height: 40%;
-webkit-transform: skew(0deg, -15deg);
-ms-transform: skew(0deg, -15deg);
background: #F00;
overflow: hidden;
z-index: -1;
position: absolute;
top: 65%;
}
.section05 .bg-image span{
width: 100%;
height: 100%;
display: block;
background:url(../img/bg_red.png) left top repeat;
-webkit-transform: skew(0deg, 15deg);
-ms-transform: skew(0deg, 15deg);
position: relative;
top:-400px;
}
.section05 .pos-re .fArea p{
text-align: center;
}
.section05 .pos-re .fArea p:first-child{
margin: 135px 0 60px 0;
}
.section05 .pos-re .fArea p:nth-child(2){
margin: 0 0 30px 0;
}
.section05 .pos-re .fArea p:nth-child(3){
font-size: 16px;
font-weight: bold;
color: #FFF;
margin-bottom: 60px;
line-height: 3.2;
}
.section05 .pos-re .fArea ul{
width: 304px;
margin: 0 auto 80px auto;
overflow: hidden;
}
.section05 .pos-re .fArea ul li{
float: left;
margin-left: 24px;
}
.section05 .pos-re .fArea ul li:first-child{
margin-left: 0;
}
.footer {
width: 100%;
margin: 0 auto;
padding-bottom: 410px;
background: #FFF;
margin-top: -190px;
z-index: 0;
position: relative;
}
.footer-inner{
width: 1200px;
margin: 0 auto;
position: relative;
}
.footer p:first-child{
position: absolute;
right: 0px;
top:255px;
}
.footer p:nth-child(2){
position: absolute;
right: 0px;
top:365px;
}
/*--------------------------------------------------------------------------
.global-header
---------------------------------------------------------------------------*/
.global-header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
min-width: 1200px;
padding: 0 40px 0 0;
/*box-shadow: 0 2px 16px -5px rgba(0, 0, 0, .3);*/
background: #fff;
display: flex;
flex-flow: wrap;
justify-content: space-around;
font-family: 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
/* 邵ｦ譁ｹ蜷代�荳ｦ縺ｳ鬆�*/
/*
flex-start�壻ｸ頑純縺茨ｼ医ョ繝輔か繝ｫ繝茨ｼ�
flex-end�壻ｸ区純縺�
center�壻ｸｭ螟ｮ謠�∴
baseline�壹�繝ｼ繧ｹ繝ｩ繧､繝ｳ
stretch�壻ｼｸ邵ｮ
*/
align-items: center;
}
.global-header .header-Inner{
width: 100%;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-flow: wrap;
justify-content: space-around;
/* 邵ｦ譁ｹ蜷代�荳ｦ縺ｳ鬆�*/
/*
flex-start�壻ｸ頑純縺茨ｼ医ョ繝輔か繝ｫ繝茨ｼ�
flex-end�壻ｸ区純縺�
center�壻ｸｭ螟ｮ謠�∴
baseline�壹�繝ｼ繧ｹ繝ｩ繧､繝ｳ
stretch�壻ｼｸ邵ｮ
*/
align-items: center;
}
.global-header__logo {
position: absolute;
left: 50%;
top: 10px;
margin-left: -35px;
}
@font-face{
font-family:'honoka';
font-style:normal;
src:url('/assets/font/font_1_honokamin.eot');
src:url('/assets/font/font_1_honokamin?#iefix') format('embedded-opentype'),
url('/assets/font/font_1_honokamin.woff') format('woff'),
url('/assets/font/font_1_honokamin.ttf') format('truetype');
}