@charset 'utf-8';

/*!
* ress.css • v1.2.2
* MIT License
* github.com/filipelinhares/ress
* 全ての要素にbox-sizing: border-box;.
* 全ての背景画像にbackground-repeat: no-repeat.
*/html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{vertical-align: bottom; width:100%;
}
body{
color:#333;
}

/*詳細ページ用*/
.page-container{
max-width:960px;
margin:  0 auto 100px;
}
h1{
font-size:40px;
text-align: center;
margin:50px 0 20px;
}
.main-img{
margin:0 auto 120px;
width:80%;
margin-bottom:50px;
}

.product{
width:70%;
margin: 0 auto 100px;
}
.product>h2{
margin-bottom: 20px;
text-align: center;
letter-spacing: 0.2em;
}
.product-txt{
line-height: 2;
}
.work-name{
font-size:28px;
text-align: center;
margin-bottom:30px;
}

.work{
display: flex;
justify-content: center;
margin-bottom: 150px;
}
.work-inner{
border:5px double rgba(51, 51, 51, 0.5);
width:35%;
line-height: 2;
margin-right: 80px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.work-inner>h2{
font-size:22px;
padding: 10px 0;
margin-bottom: 10px;
text-align: center;
background: rgba(179, 212, 252, 0.37);
letter-spacing: 0.2em;
}
.work-inner li{
padding:0 50px 15px;
font-size:15px;
line-height: 1.8;


 
}
.work-inner li>a{
 display: inline-block;
color:#333;
 border-bottom: 2px solid rgba(179, 212, 252, 0.37);
 
}
.work-inner li>a:hover{
color:rgb(252, 179, 193);
}
.work-point{
border:5px double rgba(51, 51, 51, 0.5);
width:35%;
line-height: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.work-point>h2{
font-size:22px;
padding: 10px 0 ;
margin-bottom: 10px;
background: rgba(252, 179, 193, 0.37);
padding-bottom: 10px;
text-align: center;
letter-spacing: 0.2em;
}
.work-point li{
padding:0 30px 20px;
font-size:18px;
line-height: 3.5;
}
.box{
margin-bottom:140px;
}
.box>h3{
background:rgba(179, 212, 252, 0.37);
display: inline-block;
border:3px solid rgba(179, 212, 252, 0.37) ;
margin-bottom: 3px;
font-size: 26px;

}
.box-inner{
width:100%;
display: flex;
border:1px dashed #333;
}
.box-photo{
width:60%;
object-fit: cover;
padding: 20px;
position: relative;

}
.box-txt{
width:40%;
padding: 20px;
font-size:12px;
line-height: 2;
}
.concept-txt>span{
 font-size:16px;
 font-weight:bold;
background: rgba(252, 179, 193, 0.37);
}
.inner-txt{
margin-bottom: 30px;
}

.memo{
padding:5px;
border: 1px dashed rgba(0, 0, 255, 0.51);
}
.memo span{
display: inline-block;
background: rgba(252, 179, 193, 0.37);
margin-bottom: 10px;
}
.each{
position:relative;

}
.each-point{
position:absolute;
top:80px;
right:30px;
border: 1px dashed rgba(0, 0, 255, 0.51);
padding:10px;
}
.point-title{
font-size:18px;
font-weight: bold;
color:rgba(252, 179, 193);
margin-bottom: 10px;
}
.point-txt{
line-height: 2;
font-size:13px;
}
.desgin-comp{
position: relative;
}
.comp-txt{
position: absolute;
top:50px;
left:30px;
font-size:14px;
}
.memo>img{
width:90%;
margin-bottom: 20px;
border: 1px solid #333;
}
.clock{
width:25%;
position:absolute;
top:140px;
left:380px;
}
.point{
font-size:16px;
margin-bottom: 10px;
 padding:0 5px;
display: inline-block;
background: rgba(252, 179, 193, 0.37);
}
.point-subtitle{
margin-bottom: 10px;
}
.box-txt>ul{
 margin:0 0 30px 10px;
}
.box-txt>ul>li{
 margin-bottom: 10px;
 font-size:13px;
}
.shoot .box-inner{
 position: relative;
}
#shoot-movie{
 width:240px;
 position:absolute;
right:33px;
bottom:430px;
 z-index:1;
}

/*------------------------------------------------*/
.link-box{
width:20%;
height:50px;
margin: 0 auto;
}
.link-box>p{
border:1px solid #000;
}
.link-box a{
display:block;
color:#000;
text-align: center;
line-height: 50px;
background: rgba(252, 179, 193, 0.37);
}
.link-box a:hover{
background: rgb(252, 179, 193);
}