/*=============================================================
  common.css
---------------------------------------------------------------

01. common layout
02. main-header
03. main-footer
04. home
05. pages [other than top page]
06. detail [pages such as detail of work example]
07. about us
08. service
09. photo-movie
10. web
11. web-detail
12. print
13. contact and mail common layout
14. contact
15. mail
16. thanks
17. mobile
18. media query
19. helper

===============================================================
01. common layout
=============================================================*/

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

body {
    font-size: 20px;
}

.pc,
.pc-alt {
	display: inline-block;
}

.sp,
.sp-alt {
	display: none;
}

.central {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

.central-y {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    -webkit-transform: translateY( -50% );
    -moz-transform: translateY( -50% );
    -ms-transform: translateY( -50% );
    transform: translateY( -50% );
}

.ta-c,
.ta-c-sp-l {
    width: 100%;
    text-align: center;
}

#wrapper,
#contents {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.simple-page {
    padding: 100px 0;
}

picture {
    display: block;
}

/*
 * #loading-layer
 */

#loading-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    overflow: hidden;
}

#loading-layer > div {
    display: none;
}

/*
 * #bg and #video
 */

#bg-wrapper,
#bg,
#video-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#bg-wrapper::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#bg {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#video-wrapper::after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: -webkit-gradient( linear, left top, left bottom, from(#00798d), to(#791264) );
    opacity: 0.35;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#video {
    min-width: 100%;
    min-height: 100%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

#video-wrapper .paused-layer {
    width: 100%;
    height: 100%;
    background: url( /common/video/poster-sp.jpg?v01 ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#video-wrapper .paused-layer.none {
    display: none;
}

/*
 * #visual
 */

#visual {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#visual-bg-landscape {
    display: block;
}

#visual-bg-portrait {
    display: none;
}

#visual #scroll-bar-wrapper {
    width: 3px;
    height: 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    transition: all ease 1000ms;
    -webkit-transform: translateX( -50% );
    transform: translateX( -50% );
    overflow: hidden;
    opacity: 0;
}

#visual #scroll-bar-wrapper::before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #fff;
    transform: translateY( -100% );
}

.loaded #visual #scroll-bar-wrapper::before {
    animation: scroll-bar-motion ease infinite 3000ms;
}

@keyframes scroll-bar-motion {
    0%{ transform: translateY( -100% ); opacity: 0.99999; }
    50%{ transform: translateY( 100% ); opacity: 0.99999;}
    51%{ transform: translateY( 100% ); opacity: 0; }
    100%{ transform: translateY( -100% ); opacity: 0; }
}

/*
 * common elements
 */

.inner {
    width: 84%;
    margin: 0 auto;
}

.inner.wide {
    width: 92%;
}

.base {
    padding: 70px 0 90px 0;
    overflow: hidden;
}

.base.pt-plus {
    padding-top: 90px;
}

.base.pt-minus {
    padding-top: 60px;
}

.base.pt-0 {
    padding-top: 0;
}

.base.pb-minus {
    padding-bottom: 80px;
}

.base.pb-minus-more {
    padding-bottom: 70px;
}

.base.pb-0 {
    padding-bottom: 0;
}

.base.white {
    background: rgba( 255,255,255,0.9 );
    color: #333;
}

.base.bt {
    padding-top: 90px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.base.bt.pt-little-minus {
    padding-top: 70px;
}

.base.bt.pt-minus {
    padding-top: 60px;
}

.base.bt::before {
    display: block;
    content: "";
    width: 0;
    height: 1px;
    background: rgba( 255,255,255,0.5 );
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transition: all ease 1000ms;
    overflow: hidden;
}

.active .base.bt::before {
    width: 100%;
    left: 0;
}

.part-mini {
    margin-bottom: 20px;
}

.tit-big {
    margin-bottom: 20px;
    font-size: 240%;
    text-align: center;
    letter-spacing: 3px;
    line-height: 1.5;
}

.tit-big.mb-minis {
    margin-bottom: 10px;
}

.tit-big.mb-0 {
    margin-bottom: 0;
}

.tit-01 {
    margin-bottom: 20px;
    font-size: 180%;
    letter-spacing: 2px;
    text-align: center;
}

.tit-01.ta-l,
.tit-01.ta-l-sp-c {
    text-align: left;
}

.tit-01.mb-plus {
    margin-bottom: 25px;
}

.tit-01.mb-plus-more {
    margin-bottom: 30px;
}

.tit-01.mb-plus-super {
    margin-bottom: 35px;
}

.tit-01.mb-plus-super-more {
    margin-bottom: 45px;
}

.tit-01.mb-minus {
    margin-bottom: 15px;
}

.tit-01.mb-minus-more {
    margin-bottom: 10px;
}

.tit-01.mb-0 {
    margin-bottom: 0;
}

.tit-01.en {
    font-size: 210%;
    letter-spacing: 3px;
}

.tit-01.with-mini {
    line-height: 1.3;
}

.tit-01.with-mini .mini {
    font-size: 70%;
}


.tit-02 {
    margin-bottom: 20px;
    font-size: 160%;
    letter-spacing: 2px;
    text-align: center;
}

p {
    margin-bottom: 15px;
}

p.big {
    font-size: 160%;
    line-height: 1.2;
}

p:last-child {
    margin-bottom: 0;
}

p.mb-default {
    margin-bottom: 15px;
}

p.mb-plus {
    margin-bottom: 20px;
}

p.mb-plus-more {
    margin-bottom: 25px;
}

p.mb-plus-super {
    margin-bottom: 30px;
}

p.mb-plus-super-more {
    margin-bottom: 31px;
}

p.mb-plus-super-alpha {
    margin-bottom: 35px;
}

p.mb-plus-super-dx {
    margin-bottom: 40px;
}

p.mb-minus {
    margin-bottom: 10px;
}

p.mb-minus-more {
    margin-bottom: 5px;
}

.green {
    color: #a4ffe0;
}

.yellow {
    color: #f9f177;
}

.mini {
    display: inline-block;
    font-size: 80%;
    color: #888;
    line-height: 1.7;
}

.mini.white {
    color: #fff;
}

.mini.white-alpha {
    color: rgba( 255,255,255,0.6 );
}

.mini.mb-plus {
    margin-bottom: 4px;
}

.mini.white-alpha {
    color: rgba( 255,255,255,0.6 );
}

dl.list-01 {
    padding: 30px 33px 25px 33px;
    line-height: 1.5;
}

dl.list-01.pa-0 {
    padding: 0;
}

dl.list-01 dt {
    margin-bottom: 3px;
}

dl.list-01.dt-big dt {
    font-size: 130%;
}

dl.list-01 dd {
    padding-bottom: 16px;
    border-bottom: solid 1px rgba( 0,0,0,0.2 );
    margin-bottom: 16px;
}

dl.list-01 dd.pb-plus {
    padding-bottom: 20px;
}

dl.list-01 dd:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

dl.list-01.dd-blue dd {
    color: #0a5c74;
}

dl.list-01.dd-gray dd {
    color: #888;
}

dl.list-01 .black {
    padding-top: 5px;
    display: inline-block;
    color: #333;
    font-size: 90%;
}

/*
 * flex
 */

.flex-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-wrapper li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

/*
 * .colomn-02
 */

.flex-wrapper.column-02 {
    justify-content: left;
}

.flex-wrapper.column-02.jc-c {
    justify-content: center;
}

.flex-wrapper.column-02 li {
    width: calc( 50% - 15px );
    padding-bottom: 12px;
    margin-bottom: 12px;
    text-align: left;
    border-radius: 5px;
    color: #333;
}

.flex-wrapper.column-02 li:nth-child( odd ) {
    margin-right: 15px;
}

.flex-wrapper.column-02 li:nth-child( even ) {
    margin-left: 15px;
}

.flex-wrapper.column-02.white-base li {
    background: rgba( 255,255,255,0.9 );
}

.flex-wrapper.column-02.c-white li {
    color: #fff;
}

.flex-wrapper.column-02.ta-c li {
    text-align: center;
}

.flex-wrapper.column-02.mb-plus li {
    margin-bottom: 30px;
}

.flex-wrapper.column-02.mb-plus li:last-child,
.flex-wrapper.column-02.mb-plus li:nth-last-child( 2 ) {
    margin-bottom: 0;
    padding-bottom: 0;
}

/*
 * .colomn-03
 */

.flex-wrapper.column-03.mb-plus {
    margin-bottom: 30px;
}

.flex-wrapper.column-03.jc-c {
    justify-content: center;
}

.flex-wrapper.column-03 li {
    width: calc( 100% / 3 );
}

.flex-wrapper.column-03 li a {
    display: block;
}

.flex-wrapper.column-03 li img {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1px;
    margin-bottom: 5px;
}

/*
 * .column-changer
 */

.inner.column-changer-wrapper {
    width: calc( 84% + 20px );
}

.flex-wrapper.column-changer li {
    width: calc( 100% / 6 );
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.flex-wrapper.column-changer li .thumb {
    transition: all ease 1400ms;
    transition-delay: 100ms;
    transform: scale( 0.8 ) rotateX( 45deg ) rotateY( 45deg );
    opacity: 0;
}

.active .flex-wrapper.column-changer li .thumb {
    transform: scale( 0.99999 ) rotateX( 0 ) rotateY( 0 );
    opacity: 0.99999;
}

.flex-wrapper.column-changer li a {
    display: block;
    -webkit-perspective: 1100px;
    perspective: 1100px;
}

.flex-wrapper.column-changer li a .thumb-wrapper {
    transition: all ease 600ms;
    overflow: hidden;
}

.flex-wrapper.column-changer li a:hover .thumb-wrapper {
    transform: rotateY( 15deg ) rotateX( 10deg );
}

.flex-wrapper.column-changer li a .thumb-wrapper.mb-plus {
    margin-bottom: 10px;
}

.flex-wrapper.column-changer li a .desc-area {
    display: inline-block;
    line-height: 1.5;
    font-size: 80%;
    color: rgba( 255,255,255,0.8 );
}

.flex-wrapper.column-changer.wide.li-mb-plus li {
    margin-bottom: 15px;
}

.flex-wrapper.column-changer.wide.li-mb-plus li:last-child,
.flex-wrapper.column-changer.wide.li-mb-plus li:nth-last-child( 2 ),
.flex-wrapper.column-changer.wide.li-mb-plus li:nth-last-child( 3 ) {
    margin-bottom: 0;
}

.flex-wrapper.column-changer.wide li {
    width: calc( 100% / 3 );
}

.flex-wrapper.column-changer.wide li .thumb {
    transform: scale( 0.8 ) rotateX( 23deg ) rotateY( 23deg );
}

.active .flex-wrapper.column-changer.wide li .thumb {
    transform: scale( 0.99999 ) rotateX( 0 ) rotateY( 0 );
    opacity: 0.99999;
}

.flex-wrapper.column-changer.wide li a:hover .thumb-wrapper {
    transform: rotateY( 9deg ) rotateX( 5deg );
}

/*
 * .link-text
 */

.link-text {
    display: inline-block;
    text-decoration: underline;
    transition: all ease 300ms;
    cursor: pointer;
}

.link-text.no-hover,
.link-text.no-hover:hover {
    color: #333;
}

.link-text:hover {
    color: rgba( 255,255,255,0.7 );
}

.link-text.pink:hover {
    color: #ffaae0;
}

/*
 * .link-text-no-line
 */

a.link-text-no-line {
    text-decoration: none;
}

a.link-text-no-line.white {
    color: #fff;
}

a.link-text-no-line.black {
    padding-top: 0;
    color: #333;
    font-size: 100%;
}

/*
 * btn
 */

.btn-wrapper {
    padding: 10px 0;
    text-align: center;
}

.btn-wrapper.plr-plus {
    padding-left: 60px;
    padding-right: 60px;
}

.btn-01 {
    display: inline-block;
    width: 35%;
    max-width: 500px;
    min-width: 380px;
    padding: 25px 0;
    border-radius: 1000px;
    line-height: 1.2;
    background: #fff;
    color: #333;
    box-shadow: 0 0 6px rgba( 0,0,0,0.07 );
    transition: all ease 300ms;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-01.ghost {
    border: solid 2px #fff;
    background: none;
    color: #fff;
    box-shadow: none;
}

.btn-01:hover {
    background: #0a5c74;
    color: #fff;
}

.btn-01.ghost:hover {
    border: solid 2px #0a5c74;
}


/*
 * img-asset
 */

.box-img-asset {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.box-img-asset img.first {
    vertical-align: top;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.box-img-asset img:not( .first ) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.box-img-asset.mb-plus {
    margin-bottom: 15px;
}

.box-img-asset.mb-plus-more {
    margin-bottom: 20px;
}

.box-img-asset.mb-plus-super {
    margin-bottom: 25px;
}

/*
 * basic motion
 */

.elem-00,
.elem-01,
.elem-02,
.elem-03,
.elem-04,
.elem-05,
.elem-06,
.elem-07,
.elem-08,
.elem-09,
.elem-10,
.elem-11,
.elem-12,
.elem-13,
.elem-14,
.elem-00-loaded,
.elem-01-loaded,
.elem-02-loaded,
.elem-03-loaded,
.elem-04-loaded,
.elem-05-loaded,
.elem-06-loaded,
.elem-07-loaded,
.elem-08-loaded,
.elem-09-loaded,
.elem-10-loaded,
.elem-11-loaded,
.elem-12-loaded,
.elem-13-loaded,
.elem-14-loaded {
    transition: all ease 800ms;
    transform: translateY( 20px ) scale( 0.9999999 );
    opacity: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.elem-00,
.elem-00-loaded {
    transition-delay: 10ms;
}

.elem-01,
.elem-01-loaded {
    transition-delay: 200ms;
}

.elem-02,
.elem-02-loaded {
    transition-delay: 400ms;
}

.elem-03,
.elem-03-loaded {
    transition-delay: 600ms;
}

.elem-04,
.elem-04-loaded {
    transition-delay: 800ms;
}

.elem-05,
.elem-05-loaded {
    transition-delay: 1000ms;
}

.elem-06,
.elem-06-loaded {
    transition-delay: 1200ms;
}

.elem-07,
.elem-07-loaded {
    transition-delay: 1400ms;
}

.elem-08,
.elem-08-loaded {
    transition-delay: 1600ms;
}

.elem-09,
.elem-09-loaded {
    transition-delay: 1800ms;
}

.elem-10,
.elem-10-loaded {
    transition-delay: 2000ms;
}

.elem-11,
.elem-11-loaded {
    transition-delay: 2200ms;
}

.elem-12,
.elem-12-loaded {
    transition-delay: 2400ms;
}

.elem-13,
.elem-13-loaded {
    transition-delay: 2600ms;
}

.elem-14,
.elem-14-loaded {
    transition-delay: 2800ms;
}

.active .elem-00,
.active .elem-01,
.active .elem-02,
.active .elem-03,
.active .elem-04,
.active .elem-05,
.active .elem-06,
.active .elem-07,
.active .elem-08,
.active .elem-09,
.active .elem-10,
.active .elem-11,
.active .elem-12,
.active .elem-13,
.active .elem-14 {
    transform: translateY( 0 ) scale( 0.9999999 );
    opacity: 0.99999;
}

.loaded .elem-00-loaded,
.loaded .elem-01-loaded,
.loaded .elem-02-loaded,
.loaded .elem-03-loaded,
.loaded .elem-04-loaded,
.loaded .elem-05-loaded,
.loaded .elem-06-loaded,
.loaded .elem-07-loaded,
.loaded .elem-08-loaded,
.loaded .elem-09-loaded,
.loaded .elem-10-loaded,
.loaded .elem-11-loaded,
.loaded .elem-12-loaded,
.loaded .elem-13-loaded,
.loaded .elem-14-loaded {
    transform: translateY( 0 ) scale( 0.9999999 );
    opacity: 0.99999;
}

/*
 * .box-img
 */

.box-img {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
}

/*
 * .row
 */

.row {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

/*
 * .row.double-img
 */

.row.double-img {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.row.double-img img {
    width: 50%;
    margin-bottom: 0;
}

.row.double-img a {
    display: inline-block;
}

.row.double-img.and-square img:nth-of-type( 1 ) {
    width: 60%;
}

.row.double-img.and-square img:nth-of-type( 2 ) {
    width: 40%;
}

/*
 * .row.divi
 */

.row.divi {
    margin-bottom: 80px;
}

.row.divi:last-of-type {
    margin-bottom: 20px;
}

.row.divi.mb-0 {
    margin-bottom: 0;
}

.row.divi .box-img {
    width: calc( 60% - 54px );
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.row.divi.img-left .box-img {
    left: -10%;
}

.row.divi.img-right .box-img {
    right: -10%;
}

.row.divi .box-text {
    width: 50%;
}

.row.divi.img-left .box-text {
    margin-left: 50%;
}

/*
 * .row.divi
 */

.row.divi.alt .box-img {
    width: calc( 63% - 54px );
}

.row.divi.alt .box-text {
    width: 47%;
}

.row.divi.alt.img-left .box-text {
    margin-left: 53%;
}

/*
 * .row.divi-portrait
 */

.row.divi-portrait {
    padding-top: 50%;
    margin-top: 3.5%;
    margin-bottom: calc( 8.5% + 40px );
}

.row.divi-portrait .box-img {
    position: absolute;
    z-index: 1;
}

.row.divi-portrait .box-img:nth-of-type( 1 ) {
    width: 43%;
    height: 109%;
    top: 0;
    left: 0;
}

.row.divi-portrait .box-img:nth-of-type( 2 ) {
    width: 45%;
    height: 60%;
    top: -7%;
    right: 10%;
}

.row.divi-portrait .box-img:nth-of-type( 3 ) {
    width: 30%;
    padding-top: 30%;
    bottom: -17%;
    right: 25%;
}

.row.divi-portrait .box-img:nth-of-type( 4 ) {
    width: 23%;
    padding-top: 23%;
    bottom: -3%;
    right: 0;
}

/*
 * .row.divi-img-tag
 */

.row.divi-img-tag {
    width: 100%;
    padding-top: 40%;
    margin: 6% 0 7%;
}

.row.divi-img-tag img,
.row.divi-img-tag .box-img {
    position: absolute;
    z-index: 1;
}

.row.divi-img-tag img:nth-of-type( 1 ) {
    width: 57%;
    left: 0;
    top: 0;
}

.row.divi-img-tag img:nth-of-type( 2 ) {
    width: 40%;
    right: 0;
    top: -16%;
}

.row.divi-img-tag img:nth-of-type( 3 ),
.row.divi-img-tag img:nth-of-type( 4 ),
.row.divi-img-tag img:nth-of-type( 5 ) {
    width: 52%;
    right: -5%;
    bottom: -15%;
}

.row.divi-img-tag .box-img {
    width: 29%;
    padding-top: 19%;
    bottom: -12%;
    right: 11%;
}

/*=============================================================
02. main-header
=============================================================*/

#main-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#main-header h1 a {
    display: block;
}

#main-header h1 {
    width: 300px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}

/*
 * #icon-nav
*/
#main-header #icon-nav {
	width: 80px;
	height: 80px;
	background: #0a5c74;
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 5;
	overflow: hidden;
    cursor: pointer;
    transition: all ease 400ms;
}

#main-header #icon-nav:hover {
	background: #aea410;
}

#main-header #icon-nav p {
	width: 100%;
	margin: 0;
	opacity: 0;
	position: absolute;
	bottom: 26px;
	left: 1px;
	font-size: 9px;
	line-height: 1;
	text-align: center;
}

#main-header #icon-nav p img {
    width: 29px;
}

#main-header #icon-nav span {
	display: block;
	width: 30px;
	height: 1px;
	background: #fff;
	position: absolute;
	left: 25px;
}

#main-header #icon-nav span:nth-of-type(1) {
	top: 30px;
}

#main-header #icon-nav span:nth-of-type(2) {
	top: 39px;
}

#main-header #icon-nav span:nth-of-type(3) {
	top: 48px;
}

/*
* #icon-nav [open]
*/

#main-header #icon-nav,
#main-header #icon-nav p,
#main-header #icon-nav span,
#main-header nav {
	transition: all ease 400ms;
	-webkit-transition: all ease 400ms;
}

.nav-open #main-header #icon-nav {
	background: #aea410;
}

.nav-open #main-header #icon-nav span:nth-of-type(1) {
	width: 18px;
	top: 33px;
	left: 22px;
	transform: rotate(-225deg);
	-webkit-transform: rotate(-225deg);
}

.nav-open #main-header #icon-nav span:nth-of-type(3) {
	width: 0;
	opacity: 1;
}

.nav-open #main-header #icon-nav p {
	opacity: 1;
}

/*
* global nav
*/

#main-header #close-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    background: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all ease 1000ms;
}

#main-header #nav-wrapper ul li {
    transition: all ease 800ms;
    transform: translateX( 50px );
    opacity: 0;
}

#main-header #nav-wrapper .central {
    width: 60%;
    top: 49%;
}

#main-header #nav-wrapper nav {
    font-size: 5vw;
    letter-spacing: 0.1em;
    margin-bottom: 2%;
}

#main-header #nav-wrapper nav ul li,
#main-header #nav-wrapper nav ul a {
    white-space: nowrap;
}

#main-header #nav-wrapper a {
    display: block;
}

#main-header #nav-wrapper nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

#main-header #nav-wrapper nav ul li {
    width: calc( 50% - 5px );
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.4;
}

#main-header #nav-wrapper nav ul li:nth-child( odd ) {
    margin-right: 5px;
}

#main-header #nav-wrapper nav ul li:nth-child( even ) {
    margin-left: 5px;
}

#main-header #nav-wrapper ul li a span {
    display: inline-block;
    transition: all ease 100ms;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: scale( 0.99999 );
}

#main-header #nav-wrapper nav ul li a span {
    color: #333;
}

#main-header #nav-wrapper nav ul li a:hover span {
    color: #aea410;
}

#main-header #nav-wrapper aside ul li a span {
    color: #999;
}

#main-header #nav-wrapper aside ul li a:hover span {
    color: #0a5c74;
}

#main-header #nav-wrapper ul li a:hover span {
    transform: skewX( -17deg ) scale( 0.99999 );
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 2 ) {
    transition-delay: 50ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 3 ) {
    transition-delay: 100ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 4 ) {
    transition-delay: 150ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 5 ) {
    transition-delay: 200ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 6 ) {
    transition-delay: 250ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 7 ) {
    transition-delay: 300ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 8 ) {
    transition-delay: 350ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 9 ) {
    transition-delay: 400ms;
}

#main-header #nav-wrapper ul li a:hover span:nth-of-type( 10 ) {
    transition-delay: 450ms;
}

#main-header #nav-wrapper aside ul li {
    display: inline-block;
    margin-left: 20px;
    font-size: 2vw;
    letter-spacing: 0.1em;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper aside ul li:nth-of-type( 1 ) {
    margin-left: 0;
}

#main-header #nav-wrapper aside ul li .icon-img {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.1em;
    position: absolute;
    top: 0.05em;
    right: -1.1em;
    z-index: 1;
}

.safari #main-header #nav-wrapper aside ul li .icon-img {
    top: 0;
}

#main-header #nav-wrapper aside ul li .icon-img img {
    overflow: hidden;
}

#main-header #nav-wrapper aside ul li .icon-img img:nth-of-type( 2 ) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 100ms;
    opacity: 0;
}

#main-header #nav-wrapper aside ul li a:hover .icon-img img:nth-of-type( 2 ) {
    transition-delay: 500ms;
    opacity: 0.99999;
}

/*
* global nav [open]
*/

.nav-open #main-header #nav-wrapper {
    opacity: 0.99999;
    visibility: visible;
}

.nav-open #main-header #nav-wrapper ul li {
    transform: translateX( 0 );
    opacity: 0.99999;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 1 ) {
    transition-delay: 300ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 2 ) {
    transition-delay: 400ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 3 ) {
    transition-delay: 500ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 4 ) {
    transition-delay: 600ms;
}

.nav-open #main-header #nav-wrapper aside ul li:nth-of-type( 1 ) {
    transition-delay: 700ms;
}

.nav-open #main-header #nav-wrapper aside ul li:nth-of-type( 2 ) {
    transition-delay: 800ms;
}

.nav-open #main-header #nav-wrapper aside ul li:nth-of-type( 3 ) {
    transition-delay: 900ms;
}


/*=============================================================
03. main-footer
=============================================================*/

#main-footer {
    padding: 100px 0;
    border-top: solid 1px rgba( 255,255,255,0.3 );
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    text-align: center;
}

#main-footer p {
    line-height: 1;
    font-size: 85%;
    letter-spacing: 3px;
}

/*=============================================================
04. home
=============================================================*/

#home #bg-wrapper #bg {
    display: none;
}

#home #loading-layer {
    transition: all ease 600ms;
    transition-delay: 1800ms;
    background: #000;
}

#home.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

#home #loading-layer div {
    display: block;
	width: 37px;
	height: 60px;
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) scale( 1 );
	-webkit-transform: translateX(-50%) translateY(-50%) scale( 1 );
}

#home #loading-layer div p {
    width: 10em;
    font-size: 20px;
    margin-bottom: 0;
    position: absolute;
    bottom: -10px;
    left: -210%;
    z-index: 1;
    text-align: center;
    letter-spacing: 3px;
    line-height: 1;
    font-style: italic;
    color: rgba( 255,255,255,0.2 );
    white-space: nowrap;
}

#home #loading-layer div span {
	display: block;
	width: 3px;
	height: 50px;
	background: #fff;
	position: absolute;
	top: 0;
	animation: spinner infinite ease-in-out 1200ms;
	-webkit-animation: spinner infinite ease-in-out 1200ms;
}

#home #loading-layer div span:nth-of-type(1) {
	left: 0px;
	animation-delay: -1100ms;
	-webkit-animation-delay: -1100ms;
}

#home #loading-layer div span:nth-of-type(2) {
	left: 15px;
	animation-delay: -1000ms;
	-webkit-animation-delay: -1000ms;
}

#home #loading-layer div span:nth-of-type(3) {
	left: 30px;
	animation-delay: -900ms;
	-webkit-animation-delay: -900ms;
}

#home #loading-layer div span:nth-of-type(4) {
	left: 45px;
	animation-delay: -800ms;
	-webkit-animation-delay: -800ms;
}

@keyframes spinner {
	0%, 40%, 100% { transform: scaleY( 0.5 ) rotate( 45deg ); opacity: 0.15; }
	20% { transform: scaleY( 1 ) rotate( 45deg ); opacity: 1; }
}

@-webkit-keyframes spinner {
	0%, 40%, 100% { -webkit-transform: scaleY( 0.5 ) rotate( 45deg ); opacity: 0.15; }
	20% { -webkit-transform: scaleY( 1 ) rotate( 45deg ); opacity: 1; }
}

#home.loaded #visual #scroll-bar-wrapper {
    transition-delay: 1400ms;
    opacity: 0.99999;
}

#home #bg-wrapper::after {
    background: rgba( 0,0,0,0.2 );
}

#home #visual .central {
    width: 60%;
    top: 49.7%;
}

#home #visual p {
    line-height: 1;
    margin-bottom: 0;
}

#home #visual img {
    display: block;
    transition: all ease 600ms;
    transform: translateY( 10% );
    opacity: 0;
    overflow: hidden;
}

#home #visual img:nth-of-type( 1 ) {
    transition-delay: 2300ms;
}

#home #visual img:nth-of-type( 2 ) {
    transition-delay: 2500ms;
}

#home #visual img:nth-of-type( 3 ) {
    transition-delay: 2700ms;
}

#home.loaded #visual img {
    transform: translateY( 0 );
    opacity: 0.99999;
}

#home #visual img.first {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    vertical-align: top;
}

#home #visual img:not( first ) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#home #part-service .box-img-asset.pc-alt img:nth-of-type( 3 ) {
    z-index: 2;
}

#home #part-service .box-img-asset.pc-alt img:nth-of-type( 5 ) {
    z-index: 4;
}

#home #part-service .box-img-asset.pc-alt img:nth-of-type( 6 ) {
    z-index: 3;
}

/*=============================================================
06. pages [ other than top page ]
=============================================================*/

.pages #bg-wrapper #video-wrapper,
.pages #bg-wrapper .layer-adjust-loaded {
    display: none;
}

.pages #loading-layer {
    background: #fff;
    transition: all ease 800ms;
    transition-delay: 30ms;
}

.pages.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

.pages #bg-wrapper::after {
    background: rgba( 30, 12, 0, 1 );
    transition: all ease 1000ms;
    opacity: 0;
}

.pages.add-base #bg-wrapper::after {
    opacity: 0.45;
}

.pages #bg::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: -webkit-gradient( linear, left top, left bottom, from(#791264), to(#00798d) );
    opacity: 0.35;
}

.pages.loaded #visual #scroll-bar-wrapper {
    opacity: 0.99999;
    transition-delay: 700ms;
}

.pages #visual .central {
    width: 100%;
    text-align: center;
}

.pages #visual h1 {
    font-size: 8vw;
    letter-spacing: 1.6vw;
}

.pages #visual h1 span {
    display: inline-block;
    transition: all ease 900ms;
    transform: rotateX( 90deg ) rotateY( -90deg ) translateY( 20% ) skewX( -70deg ) skewY( -70deg ) scale( 0.5 );
    overflow: hidden;
    opacity: 0;
}

.pages #visual h1 span:nth-of-type( 1 ) {
    transition-delay: 100ms;
}

.pages #visual h1 span:nth-of-type( 2 ) {
    transition-delay: 200ms;
}

.pages #visual h1 span:nth-of-type( 3 ) {
    transition-delay: 300ms;
}

.pages #visual h1 span:nth-of-type( 4 ) {
    transition-delay: 400ms;
}

.pages #visual h1 span:nth-of-type( 5 ) {
    transition-delay: 500ms;
}

.pages #visual h1 span:nth-of-type( 6 ) {
    transition-delay: 600ms;
}

.pages #visual h1 span:nth-of-type( 7 ) {
    transition-delay: 700ms;
}

.pages #visual h1 span:nth-of-type( 8 ) {
    transition-delay: 800ms;
}

.pages #visual h1 span:nth-of-type( 9 ) {
    transition-delay: 900ms;
}

.pages #visual h1 span:nth-of-type( 10 ) {
    transition-delay: 1000ms;
}

.pages #visual h1 span:nth-of-type( 11 ) {
    transition-delay: 1100ms;
}

.pages.loaded-alt #visual h1 span {
    transform: rotateX( 0 ) rotateY( 0 ) translateY( 0 ) skewX( 0 ) skewY( 0 ) scale( 0.99999 );
    opacity: 0.99999;
}

/*=============================================================
06. detail [pages such as detail of work example]
=============================================================*/

.detail #contents {
    padding-top: 80px;
}

.detail .report {
    border-radius: 7px;
    padding: 60px;
    background: rgba( 255,255,255,0.9 );
    color: #333;
}

.detail .report > img {
    margin-bottom: 35px;
}

.detail .report .box-desc {
    margin-bottom: 30px;
}

.detail .tit-01.with-sub-tit {
    padding-bottom: 35px;
    margin-bottom: 0;
    line-height: 1.4;
}

.detail .tit-01.with-sub-tit .sub-tit {
    display: inline-block;
    width: 100%;
    margin-bottom: 7px;
    font-size: 60%;
    color: #999;
}

/*=============================================================
07. about us
=============================================================*/

#about #bg {
    background-image: url( /common/img/about/bg.jpg?v01 );
}

#about #bg::after {
    opacity: 0.4;
}

#about.add-base #bg-wrapper::after {
    opacity: 0.6;
}

#about .tit-asset {
    margin-bottom: 20px;
}

#about .tit-asset .tit-01 {
    margin-bottom: 0;
}

#about #part-02 .inner section:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/about/img-kh.jpg );
}

#about #part-02 .inner section:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/about/img-th.jpg );
}

/*=============================================================
08. service
=============================================================*/

#service #bg {
    background-image: url( /common/img/service/bg.jpg?v01 );
}

#service #bg-wrapper::after {
    display: none;
}

#service #part-photo-movie .row.divi-portrait .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/service/img-photo-movie-01.jpg );
}

#service #part-photo-movie .row.divi-portrait .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/service/img-photo-movie-02.jpg );
}

#service #part-photo-movie .row.divi-portrait .box-img:nth-of-type( 3 ) {
    background-image: url( /common/img/service/img-photo-movie-03.jpg );
}

#service #part-photo-movie .row.divi-portrait .box-img:nth-of-type( 4 ) {
    background-image: url( /common/img/service/img-photo-movie-04.jpg );
}

#service #part-print .box-img-asset.pc-alt img:nth-of-type( 1 ) {
    z-index: 3;
}

#service #part-print .box-img-asset.pc-alt img:nth-of-type( 2 ) {
    z-index: 2;
}

#service #part-print .box-img-asset.pc-alt img:nth-of-type( 6 ) {
    z-index: 4;
}

/*=============================================================
09. photo-movie
=============================================================*/

#photo-movie #bg {
    background-image: url( /common/img/service//photo-movie/bg.jpg );
}

#photo-movie #bg::after {
    opacity: 0.45;
}

#photo-movie #visual h1 span:nth-of-type( 6 ) {
    color: rgba( 255,255,255,0.4 );
}

#photo-movie #part-video .video-img {
    width: 100%;
    padding-top: 60%;
    margin-bottom: 15px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#photo-movie #part-video .column-02 {
    line-height: 1.6;
}

#photo-movie #part-video .video-img a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#photo-movie #part-video .video-img a::before {
    display: block;
    content: "";
    width: 13%;
    padding-top: 13%;
    border: solid 1px #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 1000px;
    background: url( /common/img/service/photo-movie/icon-play.png ) center center no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
}

#photo-movie #part-video .video-img a .box-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 600ms;
    transform: scale( 1.0001 );
}

#photo-movie #part-video .video-img a:hover .box-img {
    transition: all linear 10000ms;
    transform: scale( 1.2 );
}

#photo-movie #part-video ul li:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/service/photo-movie/video-cap-01.jpg );
}

#photo-movie #part-video ul li:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/service/photo-movie/video-cap-02.jpg );
}

#photo-movie #part-video ul li:nth-of-type( 3 ) .box-img {
    background-image: url( /common/img/service/photo-movie/video-cap-03.jpg?v01 );
}

#photo-movie #part-video ul li:nth-of-type( 4 ) .box-img {
    background-image: url( /common/img/service/photo-movie/video-cap-04.jpg?v01 );
}

/*=============================================================
10. web
=============================================================*/

#web #bg {
    background-image: url( /common/img/service//web/bg.jpg );
}

#web #bg::after {
    background: -webkit-gradient( linear, left top, left bottom, from(#cc7cc4), to(#00798d) );
    opacity: 0;
}

#web #bg-wrapper::after {
    opacity: 0.15;
}

#web.add-base #bg-wrapper::after {
    opacity: 0.6;
}

#web .flex-wrapper.column-changer.wide.li-mb-plus > li {
    margin-bottom: 80px;
}

#web .btns {
    padding-top: 7px;
}

#web .btns li {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    text-align: center;
}

#web .btns li:last-of-type {
    margin-bottom: 0;
}

#web .btns li .btn-01 {
    display: inline-block;
    width: 100%;
    min-width: auto;
    font-size: 90%;
}

#web #case-list {
    padding-top: 40px;
}

/*=============================================================
11. web-detail
=============================================================*/

#web-detail #bg {
    background-image: url( /common/img/service/web/detail/bg.jpg );
}

#web-detail #bg::after {
    /* opacity: 0; */
}

#web-detail #bg-wrapper::after,
#web-detail.add-base #bg-wrapper::after {
    opacity: 0.1;
}

#web-detail .poja-detail .row.plus-elem img:nth-of-type( 3 ),
#web-detail .poja-detail .row.plus-elem img:nth-of-type( 4 ) {
    position: absolute;
    z-index: 1;
    margin-bottom: 0;
}

#web-detail .poja-detail .row.plus-elem img:nth-of-type( 3 ) {
    width: 11.5%;
    top: 21.6%;
    left: 74.2%;
}

#web-detail .poja-detail .row.plus-elem img:nth-of-type( 4 ) {
    width: 3.5%;
    top: 17.9%;
    left: 83.7%;
}

/*=============================================================
12. print
=============================================================*/

#print #bg {
    background-image: url( /common/img/service//print/bg.jpg );
}

#print.add-base #bg-wrapper::after {
    opacity: 0.3;
}

/*=============================================================
13. contact and mail common layout
=============================================================*/

#formWrap {
    width: 100%;
	margin: 0 auto;
}

#formWrap .box-msg {
    margin-bottom: 40px;
    text-align: center;
}

#formWrap table {
	width: 100%;
	margin: 0 auto 50px;
	border-collapse: collapse;
}

#formWrap table tr:nth-of-type( 1 ) {
    border-top: solid 1px rgba( 255,255,255,0.3 );
}

#formWrap table tr {
    border-bottom: solid 1px rgba( 255,255,255,0.3 );
}

#formWrap table th,
#formWrap table td {
	padding: 30px 0;
}

#formWrap table th {
	width: 15em;
	font-weight: normal;
	text-align: left;
}

#formWrap input[type="submit"],
#formWrap input[type="reset"],
#formWrap input[type="button"],
#formWrap input[type="text"],
#formWrap select,
#formWrap textarea {
    font-size: 95%;
    font-weight: normal;
    font-family: inherit;
    letter-spacing: 1px;
}

#formWrap input[type="text"],
#formWrap select,
#formWrap textarea {
    padding: 15px;
}

#formWrap label,
#formWrap input[type="submit"],
#formWrap input[type="reset"],
#formWrap input[type="button"] {
    cursor: pointer;
}

#formWrap input[type="text"],
#formWrap textarea {
    max-width: 100%;
    color: #333;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#formWrap textarea {
    width: 100%;
}

#formWrap .form-btns {
    text-align: center;
}

#formWrap .btn-form-01 {
    display: inline-block;
    width: 35%;
    height: 80px;
    padding: 25px 0;
    border: solid 3px #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    background: none;
    color: #fff;
    text-align: center;
    font-size: inherit;
    transition: all ease 400ms;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

#formWrap .btn-form-01:hover {
    background: #fff;
    color: #333;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
}

#formWrap .form-btns .btn-form-01:nth-last-child( 1 ) {
    margin-left: 1%;
}

#formWrap .form-btns .btn-form-01:nth-last-child( 2 ) {
    margin-right: 1%;
}

/*=============================================================
14. contact 
=============================================================*/

#about #bg {
    background-image: url( /common/img/about/bg.jpg?v01 );
}

#contact #bg {
    background-image: url( /common/img/contact/bg.jpg );
}

#contact #part-01 .box-img {
    background-image: url( /common/img/contact/img-01.jpg );
    background-position: left center;
}

#contact .requied {
    color: #03d5a6;
    font-weight: bold;
}

/*=============================================================
15. mail 
=============================================================*/

#mail #bg {
    background-image: url( /common/img/mail/bg.jpg );
}

#mail #bg::after {
    opacity: 0;
}

#mail #bg-wrapper::after,
#mail.add-base #bg-wrapper::after {
    opacity: 0.6;
} 

#mail #errm-wrapper,
#mail #formWrap table {
    max-width: 1200px;
}

#mail #errm-wrapper {
    margin: 0 auto;
    text-align: center;
}

#mail #errm-wrapper > p,
#mail p.error_messe {
    border-bottom: solid 1px rgba( 255,255,255,0.3 );
    margin: 0;
}

#mail #errm-wrapper > p {
    padding-bottom: 20px;
}

#mail p.error_messe {
    padding: 15px 0;
	/* color: #ff9914; */
	color: #fff;
}

#mail .errm-inner {
    margin-bottom: 40px;
}

#mail #formWrap table td {
    word-break: break-all;
}

#mail #formWrap table td a {
    color: #fff;
    text-decoration: none;
}

/*=============================================================
16. thanks
=============================================================*/

#thanks,
#thanks #wrapper,
#thanks #contents {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#thanks #bg {
    background-image: url( /common/img/thanks/bg.jpg );
}

#thanks #part-01 {
    width: 80%;
    max-width: 800px;
    text-align: center;
    color: #333;
}

#thanks #part-01 #thanks-motion {
    border: solid 1px #fff;
    border-radius: 5px;
    transition: all ease 600ms;
    transition-delay: 300ms;
    transform: translateY( 20% );
    opacity: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#thanks.loaded #part-01 #thanks-motion {
    transform: translateY( 0 );
    opacity: 0.99999;
}

#thanks #part-01 h1 {
    padding: 20px 0;
    background: rgba( 255,255,255,0.9 );
    font-size: 24px;
}

#thanks #part-01 #thanks-msg {
    padding: 30px;
    background: rgba( 255,255,255,0.7 );
}

#thanks #part-01 #thanks-msg p {
    margin-bottom: 15px;
}

#thanks #main-footer {
    width: 80%;
    padding: 20px 0;
    border-top: none;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 10%;
    z-index: 2;
}

/*=============================================================
17. mobile
=============================================================*/

.mobile #main-header #nav-wrapper nav ul li a span,
.mobile #main-header #nav-wrapper ul li a span,
.mobile #main-header #nav-wrapper nav ul li a:hover span,
.mobile #main-header #nav-wrapper aside ul li a:hover span,
.mobile #main-header #nav-wrapper ul li a:hover span,
.mobile .flex-wrapper.column-changer li a:hover,
.mobile .btn-01,
.mobile .link-text,
.mobile #formWrap .btn-form-01,
.mobile .flex-wrapper.column-changer li a,
.mobile .flex-wrapper.column-changer.wide li a .thumb-wrapper,
.mobile .flex-wrapper.column-changer.wide li a:hover .thumb-wrapper,
#photo-movie.mobile #part-video .video-img a .box-img,
#photo-movie.mobile #part-video .video-img a:hover .box-img {
    transition: none;
    transform: none;
}

.mobile #main-header #icon-nav:hover {
    background: #0a5c74;
}

.nav-open.mobile #main-header #icon-nav {
    background: #aea410;
}

.mobile #main-header #nav-wrapper nav ul li a:hover span {
    color: #333;
}

.mobile #main-header #nav-wrapper aside ul li a:hover span {
    color: #999;
}

.mobile .btn-01:hover {
    color: #333;
    background: #fff;
}

.mobile .link-text {
    color: #fff;
}

.mobile .link-text.no-hover,
.mobile .link-text.no-hover:hover {
    color: #333;
}

.mobile #formWrap .btn-form-01,
.mobile #formWrap .btn-form-01:hover {
    background: none;
    color: #fff;
}

/*=============================================================
18. media query
=============================================================*/

@media screen and (orientation: portrait) {

    #home #visual .central {
        width: 70%;
    }

    #about #bg {
        background-image: url( /common/img/about/bg-p.jpg?v01 );
    }

    #photo-movie #bg {
        background-image: url( /common/img/service/photo-movie/bg-p.jpg );
    }

    #photo-movie.add-base #bg-wrapper::after {
        opacity: 0.6;
    }

    #web #bg {
        background-image: url( /common/img/service//web/bg-p.jpg?v01 );
    }

    #web #bg-wrapper::after {
        opacity: 0.1;
    }

    #print #bg {
        background-image: url( /common/img/service//print/bg-p.jpg );
    }

}

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

    .inner.column-changer-wrapper.for-wide {
        width: calc( 84% + 40px );

    }

    .flex-wrapper.column-changer.wide.li-mb-plus li:last-child,
    .flex-wrapper.column-changer.wide.li-mb-plus li:nth-last-child( 2 ) {
        margin-bottom: 0;
    }

    .flex-wrapper.column-changer.wide li {
        width: calc( 100% / 2 );
        padding: 10px 20px;
    }

    .flex-wrapper.column-changer.wide li .thumb {
        transform: scale( 0.8 ) rotateX( 20deg ) rotateY( 20deg );
    }

    .active .flex-wrapper.column-changer.wide li .thumb {
        transform: scale( 0.99999 ) rotateX( 0 ) rotateY( 0 );
        opacity: 0.99999;
    }

    .flex-wrapper.column-changer.wide li a {
        perspective: 350px;
    }

    .flex-wrapper.column-changer.wide li a:hover .thumb-wrapper {
        transform: rotateY( 1.3deg ) rotateX( 1.3deg ) scale( 0.99 );
    }

}

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

    body {
        font-size: 18px;
    }

    #formWrap .btn-form-01 {
        width: 49%;
    }

    #formWrap .form-btns .btn-form-01:nth-last-child( 1 ) {
        margin-left: 1%;
    }

    #formWrap .form-btns .btn-form-01:nth-last-child( 2 ) {
        margin-right: 1%;
    }


}

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

    .flex-wrapper.column-changer li {
        width: calc( 100% / 5 );
    }

    .detail .report {
        padding-top: 45px;
    }

}

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

    .row.divi:last-of-type {
        margin-bottom: 0;
    }

    .row.divi .box-text {
        width: 100%;
    }

    .row.divi .box-img {
        width: 110%;
        height: auto;
        padding-top: 60%;
        margin-bottom: 40px;
        position: relative;
    }

    .row.divi.img-left .box-text {
        margin-left: 0;
    }

    .row.divi.img-right .box-img {
        right: auto;
        left: 0;
    }

    .row.divi.alt .box-img {
        padding: 0;
        height: 100%;
        position: absolute;
    }

}

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

    .flex-wrapper.column-changer li {
        width: calc( 100% / 4 );
    }

}

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

    #contact table tr:last-of-type th {
        vertical-align: top;
    }

}

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

	.pc {
		display: none;
    }

	.sp {
		display: inline-block;
    }

    p.mb-plus-super-dx {
        margin-bottom: 28px;
    }

    #part-sns picture {
        margin-bottom: 10px;
    }

    #visual #scroll-bar-wrapper {
        width: 2px;
    }

    .flex-wrapper.column-changer.wide li {
        width: 100%;
    }

    .flex-wrapper.column-changer.wide.li-mb-plus li:nth-last-child( 2 ),
    .flex-wrapper.column-changer.wide.li-mb-plus li:nth-last-child( 3 ) {
        margin-bottom: 15px;
    }

    .flex-wrapper.column-changer.wide.li-mb-plus li:last-child {
        padding-bottom: 0;
    }

    .row.divi .box-img {
        padding-top: 75%;
    }

    .detail .report {
        padding: 45px;
    }

    #web .flex-wrapper.column-changer.wide.li-mb-plus > li {
        margin-bottom: 45px;
    }

    #web .flex-wrapper.column-changer.wide.li-mb-plus > li:last-child {
        margin-bottom: 10px;
    }

    #formWrap {
        margin: 0 auto;
    }

    #formWrap table tr {
        display: block;
        padding: 20px 0 25px;
    }

    #formWrap table tr:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }

    #formWrap table th,
    #formWrap table td {
        width: auto;
        padding: 0;
        display: block;
    }

    #formWrap table th {
        margin-bottom: 5px;
        border-bottom: 0;
    }

    #formWrap input[type="text"],
    #formWrap textarea {
        display: block;
        width: 100%;
        padding: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #mail #formWrap table {
        border: solid 1px rgba( 255,255,255,0.3 );
    }

    #mail #formWrap table tr {
        padding: 0;
        border-bottom: none;
    }

    #mail #formWrap table tr:nth-of-type( 1 ) {
        border-top: none;
    }

    #mail #formWrap table tr th,
    #mail #formWrap table tr td {
        padding: 20px;
    }

    #mail #formWrap table tr th {
        margin-bottom: 0;
        font-size: 110%;
        background: rgba( 255,255,255,0.2 );
    }

    #thanks #main-footer {
        width: 100%;
        left: 0;
        bottom: 1vh;
    }

}

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

    .pc-alt {
        display: none;
    }

    .sp-alt {
        display: inline-block;
    }

    .sp-ta-c,
    .sp-ta-c .ta-l,
    .tit-01.ta-l-sp-c {
        width: 100%;
        text-align: center;
    }

    .ta-c-sp-l {
        text-align: left;
    }

    .inner.sp-wide {
        width: 95%;
    }

    .base,
    .base.pt-minus {
        padding: 45px 0 60px;
    }

    .base.pt-plus {
        padding-top: 65px;
    }

    .base.bt.sp-pt-plus,
    .base.sp-bt.sp-pt-plus {
        padding-top: 55px;
    }

    .base.bt.sp-pt-plus-more,
    .base.sp-bt.sp-pt-plus-more {
        padding-top: 65px;
    }

    .base.bt {
        padding-top: 45px;
    }

    .base.bt.pt-little-minus {
        padding-top: 40px;
    }

    .base.bt.pt-minus {
        padding-top: 35px;
    }

    .base.sp-bt {
        padding-top: 45px;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .base.sp-bt::before {
        display: block;
        content: "";
        width: 0;
        height: 1px;
        background: rgba( 255,255,255,0.5 );
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        transition: all ease 1000ms;
        overflow: hidden;
    }

    .active .base.sp-bt::before {
        width: 100%;
        left: 0;
    }

    .part-mini {
        margin-bottom: 30px;
    }

    .tit-big {
        font-size: 200%;
        letter-spacing: 2px;
    }

    .tit-01 {
        line-height: 1.4;
    }

    .tit-01.mb-plus-super-more {
        margin-bottom: 35px;
    }

    .tit-01.en.mb-plus {
        margin-bottom: 30px;
    }

    .tit-01.en.sp-mb-plus {
        margin-bottom: 23px;
    }

    .tit-01.sp-small {
        font-size: 140%;
    }

    .tit-01.with-mini {
        margin-bottom: 15px;
        padding-top: 2px;
        line-height: 1.2;
    }

    .tit-02 {
        line-height: 1.4;
        margin-bottom: 16px;
    }

    p.mb-plus-super {
        margin-bottom: 25px;
    }

    p.mb-plus-super-more {
        margin-bottom: 29px;
    }

    p.mb-plus-super.sp-minus {
        margin-bottom: 15px;
    }

    p.mb-plus-super-alpha {
        margin-bottom: 25px;
    }

    .btn-wrapper {
        padding: 5px 0;
    }

    .btn-wrapper.plr-plus {
        padding-left: 0;
        padding-right: 0;
    }

    .btn-01 {
        width: 100%;
        max-width: initial;
        min-width: auto;
        box-shadow: 0 0 5px rgba( 0,0,0,0.1 );
    }

    .inner.column-changer-wrapper {
        width: calc( 84% + 2px );
    }

    .flex-wrapper.column-changer li {
        width: calc( 100% / 3 );
        padding: 1px;
    }

    .flex-wrapper.column-02 {
        margin-bottom: 0;
    }

    .flex-wrapper.column-02 li,
    .flex-wrapper.column-02.mb-plus li:nth-last-child( 2 ) {
        width: 100%;
        margin-bottom: 35px;
    }

    .flex-wrapper.column-02 li:last-of-type {
        margin-bottom: 0;
    }

    .flex-wrapper.column-02 li:nth-child( odd ) {
        margin-right: 0;
    }

    .flex-wrapper.column-02 li:nth-child( even ) {
        margin-left: 0;
    }

    .flex-wrapper.column-02 li {
        padding-bottom: 8px;
    }

    .flex-wrapper.column-02.mb-plus li {
        padding-bottom: 0;
    }

    .flex-wrapper.column-02.sp-connect li {
        margin-bottom: 0;
        padding-bottom: 0;
        border-radius: 0;
    }

    .flex-wrapper.column-03 li {
        width: 100%;
        margin-bottom: 35px;
    }

    .flex-wrapper.column-03 li:last-of-type {
        margin-bottom: 0;
    }

    .detail #contents {
        padding-top: 50px;
    }

    .detail .report {
        padding: 25px 30px 33px 30px;
        font-size: 94%;
    }

    .detail .tit-01.with-sub-tit {
        padding-bottom: 20px;
        font-size: 160%;
    }

    .detail .tit-01.with-sub-tit .sub-tit {
        font-size: 50%;
    }

    .detail .report img {
        margin-bottom: 25px;
    }

    .detail .report .box-desc {
        margin-bottom: 20px;
    }

    .detail #part-back-btn .base.pb-minus {
        padding-bottom: 45px;
    }


    .row.divi {
        margin-bottom: 60px;
    }

    .row.double-img {
        display: block;
        margin-bottom: 25px;
    }

    .row.double-img img,
    .row.double-img.and-square img:nth-of-type( 1 ),
    .row.double-img.and-square img:nth-of-type( 2 ) {
        width: 100%;
        margin-bottom: 0;
    }

    #web #case-list {
        padding-top: 30px;
    }

    #web-detail .poja-detail .row.plus-elem img:nth-of-type( 3 ) {
        width: 28%;
        top: 53%;
        left: 36%;
    }

    #web-detail .poja-detail .row.plus-elem img:nth-of-type( 4 ) {
        width: 7.5%;
        top: 50.4%;
        left: 60.3%;
    }

    .row.divi .box-img,
    .row.divi.alt .box-img {
        width: 100%;
        padding-top: 135%;
        margin-bottom: 25px;
    }

    .row.divi.alt .box-img {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .row.divi.img-left .box-img,
    .row.divi.alt.img-left .box-img {
        left: 0;
    }

    .row.divi.alt.img-left .box-text {
        width: 100%;
        margin-left: 0;
    }

    dl.list-01 dd:last-of-type,
    .flex-wrapper.column-02.sp-connect li:last-of-type dl.list-01 dd:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }

    .flex-wrapper.column-02.sp-connect li:first-of-type dl.list-01 dd:last-of-type {
        padding-bottom: 16px;
        border-bottom: solid 1px rgba( 0,0,0,0.2 );
        margin-bottom: 16px;
    }

    .flex-wrapper.column-02.sp-connect li:nth-child( odd ) dl.list-01 {
        padding-bottom: 0;
    }

    .flex-wrapper.column-02.sp-connect li:nth-child( even ) dl.list-01 {
        padding-top: 0;
    }

    .flex-wrapper.column-02.sp-connect li:nth-of-type( 1 ) {
        border-radius: 5px 5px 0 0;
    }

    .flex-wrapper.column-02.sp-connect li:last-of-type {
        border-radius: 0 0 5px 5px;
        padding-bottom: 8px;
    }

    .row.divi-portrait {
        padding-top: 0;
        margin-bottom: 32px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
    }

    .row.divi-portrait .box-img:nth-of-type( 1 ),
    .row.divi-portrait .box-img:nth-of-type( 2 ),
    .row.divi-portrait .box-img:nth-of-type( 3 ),
    .row.divi-portrait .box-img:nth-of-type( 4 ) {
        display: inline-block;
        width: calc( 50% - 2px );
        padding-top: 70%;
        margin-bottom: 4px;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .row.divi-portrait .box-img:nth-child( odd ) {
        margin-right: 2px;
    }

    .row.divi-portrait .box-img:nth-child( even ) {
        margin-left: 2px;
        top: -30px;
    }

    .row.divi-portrait .box-img:last-child,
    .row.divi-portrait .box-img:nth-last-child( 2 ) {
        margin-bottom: 0;
    }

    .row.divi-img-tag {
        padding-top: 0;
    }

    .row.divi-img-tag img,
    .row.divi-img-tag .box-img {
        position: relative;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        z-index: 1;
    }

    .row.divi-img-tag .box-img {
        width: 100%;
        padding-top: 60%;
        margin-top: 5%;
    }

    .pages #visual .central {
        top: 52%;
    }

    .pages #visual h1 {
        font-size: 12vw;
    }

    .pages #visual h1.sp-s {
        font-size: 11vw;
        letter-spacing: 1vw;
    }

    #main-header h1 {
        width: 240px;
        top: 12px;
        left: 12px;
    }

    #main-header #icon-nav {
        width: 60px;
        height: 60px;
        top: 0;
        right: 0;
    }

    #main-header #icon-nav p {
        bottom: 17px;
    }

    #main-header #icon-nav span {
        width: 25px;
        left: 18px;
    }

    #main-header #icon-nav span:nth-of-type(1) {
        top: 20px;
    }

    #main-header #icon-nav span:nth-of-type(2) {
        top: 28px;
    }

    #main-header #icon-nav span:nth-of-type(3) {
        top: 36px;
    }

    .nav-open #main-header #icon-nav span:nth-of-type(1) {
        width: 18px;
        top: 22px;
        left: 15px;
    }

    #main-header #nav-wrapper .central {
        top: 50%;
    }

    #main-header #nav-wrapper nav {
        font-size: 10.5vw;
    }

    #main-header #nav-wrapper nav ul li {
        width: 100%;
        line-height: 1.32;
    }

    #main-header #nav-wrapper nav ul li:nth-child( odd ) {
        margin-right: 0;
    }

    #main-header #nav-wrapper nav ul li:nth-child( even ) {
        margin-left: 0;
    }

    #main-header #nav-wrapper aside ul li {
        width: 100%;
        margin-left: 0;
        font-size: 6vw;
        line-height: 1;
        padding: 0.4em 0;
    }

    #main-header #nav-wrapper aside ul li a {
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #main-footer {
        padding: 70px 0;
    }

    #main-footer p {
        font-size: 80%;
        letter-spacing: 2px;
    }

    #home #visual .central {
        width: 85%;
        top: 50.5%;
    }

    #home #part-info {
        margin-bottom: 0;
    }

    #home #part-service .box-img-asset.sp-alt img:nth-of-type( 4 ) {
        z-index: 2;
    }

    #home #part-service .box-img-asset.sp-alt img:nth-of-type( 6 ) {
        z-index: 3;
    }

    #about #part-02 .inner section:nth-of-type( 1 ) .box-img {
        margin-bottom: 22px;
    }

    #about .tit-asset {
        margin-bottom: 13px;
    }

    #about .tit-asset .tit-01 {
        font-size: 140%;
        line-height: 1.5;
        margin-bottom: 2px;
    }

    #about .tit-asset .role,
    #about .tit-asset .mini {
        font-size: 70%;
    }

    #service #part-web .box-img-asset.sp-alt img:nth-of-type( 2 ) {
        z-index: 2;
    }

    #service #part-web .box-img-asset.sp-alt img:nth-of-type( 4 ) {
        z-index: 3;
    }

    #service #part-print .box-img-asset.sp-alt img:nth-of-type( 1 ) {
        z-index: 3;
    }

    #service #part-print .box-img-asset.sp-alt img:nth-of-type( 4 ) {
        z-index: 2;
    }

    #service #part-photo-movie .row.divi-portrait .box-img:nth-of-type( 3 ) {
        background-image: url( /common/img/service/img-photo-movie-sp-03.jpg );
    }

    #photo-movie #visual h1 span:nth-of-type( 5 ),
    #photo-movie #visual h1 span:nth-of-type( 6 ) {
        letter-spacing: 0;
    }

    #photo-movie #visual h1 span:nth-of-type( 6 ) {
        margin: 0 2.5vw;
        color: rgba( 255,255,255,0.5 );
    }

    #photo-movie #part-video .video-img {
        padding-top: 100%;
    }

    #photo-movie #part-video .video-img a::before {
        width: 21%;
        padding-top: 21%;
    }

    #mail #errm-wrapper {
        text-align: left;
    }

    #formWrap .btn-form-01 {
        width: 100%;
    }

    #formWrap .form-btns .btn-form-01:nth-last-child( 2 ) {
        margin-right: 0;
        margin-bottom: 10px;
    }

    #formWrap .form-btns .btn-form-01:nth-last-child( 1 ) {
        margin-left: 0;
    }

    #formWrap .box-msg {
        margin-bottom: 30px;
    }

    #formWrap .box-msg p {
        text-align: left;
    }

    #thanks #part-01 #thanks-msg p {
        text-align: left;
    }

}

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

    body {
        font-size: 17px;
    }

    #main-footer p {
        font-size: 78%;
    }

}

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

    #main-footer p {
        font-size: 75%;
        letter-spacing: 1px;
    }

}

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

    body {
        font-size: 16px;
    }

    #main-header h1 {
        width: 220px;
        top: 13px;
        left: 13px;
    }

}

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

    body {
        font-size: 15px;
    }

    #main-header h1 {
        width: 198px;
        top: 14px;
        left: 12px;
    }

}

/*=============================================================
19. helper
=============================================================*/

.clr {
	clear: both;
}

/*
* clear fix
*/

.cf:before,
.cf:after {
	content:"";
	display: block;
	height: 0;
	overflow: hidden;
}

.cf:after {
	clear: both;
}