@charset "UTF-8";
/*---------------------- Global Navi Button ------------------------*/
#gNaviBtn span {
border-bottom: solid 2px #000;
}
/*---------------------- Effect Fade ------------------------*/
.effect-fade {
opacity : 0;
transition : all 2000ms;
}
.effect-fade.effect-scroll {
opacity : 1;
}
/*---------------------- Main Visual ------------------------*/
#mainVisual{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width:100%;
height:100vh;
position: relative;
}
@media (orientation: landscape) and (min-width: 768px){
#mainVisual{
background-image: url("../images/craftsmanship/pc_main_visual_photo01.jpg");
background-size:cover;
background-position: center bottom;
background-attachment: fixed;
}
}
@media (orientation: portrait) and (min-width: 768px){
#mainVisual:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100%;
background:url("../images/craftsmanship/pc_main_visual_photo01.jpg") center no-repeat;
background-size:cover;
}
}
@media (orientation: landscape) and (max-width: 767px){
#mainVisual:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
background:url("../images/craftsmanship/pc_main_visual_photo01.jpg") center no-repeat;
background-size:cover;
}
}
@media (orientation: portrait) and (max-width: 767px){
#mainVisual:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
background:url("../images/craftsmanship/sp_main_visual_photo01.jpg") center bottom no-repeat;
background-size:cover;
}
}
@media (min-width: 768px){
#mainVisual .inner{
text-align: center;
box-sizing: border-box;
background-color: rgba(255,255,255,0.85);
padding:40px 0 0;
width:800px;
height:480px;
display: none;
}
#mainVisual .inner .logo{
margin-bottom:30px;
}
#mainVisual .inner h1{
font-size: 2em;
letter-spacing: 0.3em;
margin-bottom:30px;
}
#mainVisual .inner p{
line-height: 220%;
}
#mainVisual .downArrow{
width: 20px;
height: 20px;
border: 5px solid;
border-color:  transparent transparent #FFF #FFF;
transform: rotate(-45deg);
position: fixed;
left:50%;
margin-left:-21px;
bottom:5%;
}
}
@media (max-width: 767px){
#mainVisual{
padding:8%;
height: 100%;
box-sizing: border-box;
}
#mainVisual .inner{
text-align: center;
padding:7% 6% 7% 7%;
background-color: rgba(255,255,255,0.85);
margin-top:10px;
}
#mainVisual .inner .logo{
margin-bottom:4%;
text-align: center;
}
#mainVisual .inner .logo img{
width:40%;
height:auto;
}
#mainVisual .inner h1{
font-size:1.2em;
margin-bottom:4%;
letter-spacing: 0.3em;
line-height: 150%;
}
#mainVisual .inner p{
line-height: 200%;
font-size: 0.8em;
text-align: left;
letter-spacing: 0.09em;
}
#mainVisual .downArrow{
width: 15px;
height: 15px;
border: 3px solid;
border-color:  transparent transparent #FFF #FFF;
transform: rotate(-45deg);
position: fixed;
bottom:5%;
}
}
@media (orientation: landscape) and (max-width: 767px){
#mainVisual{
height: auto;
box-sizing: border-box;
}
#mainVisual .inner{
padding:20px 20px 20px 25px;
background-color: rgba(255,255,255,0.85);
}
#mainVisual .inner .logo{
margin-bottom:15px;
}
#mainVisual .inner .logo img{
width:100px;
height:auto;
}
#mainVisual .inner h1{
font-size:1.1em;
margin-bottom:15px;
}
#mainVisual .inner h1 br{
display: none;
}
#mainVisual .inner p{
line-height: 200%;
font-size: 0.7em;
}
}
@media (max-width: 374px){
#mainVisual .inner h1{
font-size:1em;
}
#mainVisual .inner p{
line-height: 200%;
font-size: 0.7em;
}
}
/*---------------------- Craftsmanship ------------------------*/
#craftsmanship{
background-color: #FFF;
}
#craftsmanship li{
list-style-type: none;
}
#craftsmanship li .photo img{
width:100%;
display: block;
}
#craftsmanship li .text .process{
letter-spacing: 0.2em;
font-size: 0.8em;
margin:0 0 10px;
}
#craftsmanship li .text h2{
font-size:2em;
letter-spacing: 0.2em;
}
#craftsmanship li .text p{
line-height: 200%;
}
@media (min-width: 768px){
#craftsmanship{
padding:6%;
}
#craftsmanship li{
margin:0 auto 8%;
}
#craftsmanship li:last-of-type{
margin:0 auto 3%;
}
#craftsmanship li .text .title{
margin-bottom:40px;
}
}
@media (orientation: landscape) and (min-width: 768px){
#craftsmanship li{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#craftsmanship li.process01{
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
#craftsmanship li.reverse{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#craftsmanship li .photo{
width:55%;
}
#craftsmanship li.process01 > .photo{
background-image: url("../images/craftsmanship/photo01.jpg");
background-size:cover;
background-position: center;
}
#craftsmanship li.process01 > .photo img{
display: none;
}
#craftsmanship li .text{
box-sizing: border-box;
padding:0 4%;
width:45%;
}
#craftsmanship li .text li{
margin:5% 0 0;
}
#craftsmanship li .text li .photo{
width:40%;
}
#craftsmanship li .text li p{
width:60%;
box-sizing: border-box;
padding-left:2em;
font-size:0.9em;
}
}
@media (max-width: 1365px) and (min-width: 768px) {
#craftsmanship li .text .title{
margin-bottom:30px;
}
#craftsmanship li .text .process{
letter-spacing: 0.2em;
font-size: 0.8em;
margin:0 0 10px;
}
#craftsmanship li .text h2{
font-size:1.2em;
}
#craftsmanship li .text p{
font-size: 0.9em;
}
#craftsmanship li .text li p {
font-size: 0.7em;
}
}
@media (orientation: portrait) and (min-width: 768px){
#craftsmanship{
padding:7%;
}
#craftsmanship li .text{
margin-top:30px;
}
#craftsmanship li .text ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
margin:5% 0 0;
}
#craftsmanship li.process01 .text li{
width:calc(95% / 2);
margin:0 5% 0 0;
}
#craftsmanship li.process01 .text li:last-of-type{
margin:0;
}
#craftsmanship li.process01 .text li p{
margin:2% 0 0;
}
}
@media (max-width: 767px){
#craftsmanship li{
padding:20px 20px 0;
}
#craftsmanship li.gray{
background-color: #f0f0f0;
}
#craftsmanship li:last-of-type{
margin:0;
}
#craftsmanship li .text{
padding:15px 0 20px;
}
#craftsmanship li .text .title{
margin-bottom:15px;
}
#craftsmanship li .text .process{
font-size: 0.7em;
margin:0 0 5px;
}
#craftsmanship li .text h2{
font-size:1.2em;
}
#craftsmanship li .text p{
font-size: 0.9em;
}
#craftsmanship li .text ul p{
padding:10px 0 20px;
}
#craftsmanship li .text ul li:last-of-type {
    padding:0 20px;
}
#craftsmanship li .text ul li:last-of-type p {
    padding: 10px 0 0;
}
}
/*---------------------- Link Banner ------------------------*/
@media (max-width: 767px) {
#bottomContents.black{
background-color: #c8c8c8;
}
}