@charset "utf-8";
/* 20240626 */
body#work{
	display: flex;
	flex-direction: column;
	align-items: center;
	}
/* --------------------------------------------- */
/* ------------------- main -------------------- */
/* --------------------------------------------- */
body#work main article{
	display: flex;
	justify-content: center;
	width: 100vw;
	position: relative;
}
body#work main article .inner_width{
	margin: calc(10vw + 4em) auto calc(4vw + 4em);
	width: 80vw;/*各スライダー全体の横幅(4箇所)と共通*/
	max-width: 1200px;
	}
	body#work main article:first-of-type .inner_width{
			margin-top: calc(20vw + 2em);
		}
	body#work main article:nth-last-of-type(2) .inner_width{
			margin-bottom: calc(10vw + 6em);
		}

body#work main article#dtp{	background-color: var(--color_l01);}
body#work main article#web{	background-color: var(--color_l02);}
body#work main article#img{	background-color: var(--color_l01);}
body#work main article#mov{	background-color: var(--color_l02);}
body#work main article#other{ 
	background-color: var(--color_l01);
	position: relative;
	}
	body#work main article#other div.c_number{
		position: absolute;
		top: -3em;
		left:calc(50% - 3em);
		width: 6em;
		height: 6em;
		border-radius: 3em;
		background-color: var(--color_l01);
		text-align: center;
		}
	body#work main article#other div.c_number h1::before{
		content: url("../../img/radiation.svg");
		position: absolute;
		top:-1.6em;
		left:calc(50% - 2.5em);
		width: 5em;
		height: auto;
		}
	body#work main article#other div.c_number h1 span{
		position: absolute;
		left:calc(50% - .6em);
		top:.6em;
		}

body#work main article .inner_width{
	display: flex;
	flex-direction: column;
	}
body#work main article .inner_width h1{
	margin-bottom: 1em;
	}
body#work main article .inner_width h1 + p{
	margin-bottom: 1em;
	}
body#work main article .inner_width .sample_area {
	width: 80vw;/*各スライダー全体の横幅(4箇所)と共通*/
	max-width: 1200px;
	height: 50vh;/*スライダー全体の縦幅(3箇所)*/
	background-color: var(--color_l02);
	}
body#work main article .inner_width .sample_area_fit img{
	object-fit: cover;
	width: 80vw;/*各スライダー全体の横幅(4箇所)と共通*/
	max-width: 1200px;
	}

body#work main article#mov iframe.yt16_9{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	max-width: 1200px;
	}

body#work main article#other .inner_width {
    display: flex;
	flex-direction: column;
	align-items: center;
    }
body#work main article#other h2{
	position: relative;
	display: inline-block;
	width:17em;
	text-align: center;
	}
body#work main article#other h2{margin-bottom: 1em;}
body#work main article#other h3{margin-bottom: .6em;}
body#work main article#other h2,
body#work main article#other h3{
	font-size: 1em;
	font-weight: bold;
	color: var(--color-lbla)
	}
	body#work main article#other h2:before,
	body#work main article#other h2:after {
	content: '';
	position: absolute;
	top:50%;
	display: inline-block;
	width: 4em;
	height: 1px;
	background-color: var(--color-lbla);
	}
	body#work main article#other h2:before {
		right:0;
		}
	body#work main article#other h2:after {
		left: 0;
		}

body#work main article#other div.inner_width{
    margin-top: calc(3vw + 2em);
	}
body#work main article#other div.inner_width div.other_works{
	position: relative;
	background-color: #fff;
	padding: 1em 2em 1em 3em;
	margin-bottom: 3em;
	width: 17em;
}
body#work main article#other div.inner_width div.tools{
	margin-bottom: 1em;
	border-bottom: 1px solid var(--color-lbla);
	width: 17em;
	padding: 1em;
	}
body#work main article#other div.inner_width div.other_works ul,
body#work main article#other div.inner_width div.tools ul{
	color: var(--color-lbla);
	}
body#work main article#other div.inner_width div.tools ul{
	margin-bottom: 1em; margin-left: 1.4em;
	}

/*==================================================
スライダーのためのcss 参照 https://coco-factory.jp/ugokuweb/move01/6-1-1/
===================================*/
.slider {
    position:relative;
	z-index: 4;/*背景波線が1にしてあるから4に変更*/
	height: 50vh;/*スライダー全体の縦幅(3箇所)*/
}
/*　背景画像設定　*/
.slider-item01 {background:url("../../img/work_img_dtp_01.png");}
.slider-item02 {background:url("../../img/work_img_dtp_02.png");}
.slider-item03 {background:url("../../img/work_img_dtp_03.png");}
.slider-item04 {background:url("../../img/work_img_dtp_04.png");}
.slider-item05 {background:url("../../img/work_img_dtp_05.png");}
.slider-item06 {background:url("../../img/work_img_dtp_06.png");}
.slider-item07 {background:url("../../img/work_img_dtp_07.png");}
.slider-item08 {background:url("../../img/work_img_parts_08.png");}
.slider-item09 {background:url("../../img/work_img_parts_09.png");}
.slider-item10 {background:url("../../img/work_img_parts_10.png");}
.slider-item11 {background:url("../../img/work_img_parts_11.png");}
.slider-item12 {background:url("../../img/work_img_parts_12.png");}
.slider-item13 {background:url("../../img/work_img_parts_13.png");}

.slider-item {
    width: 80vw;/*各スライダー全体の横幅(4箇所)*/
    height:50vh;/*各スライダー全体の縦幅(3箇所)*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: contain;/*背景画像が.slider-item全体を覆い表示する場合はcover*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 5;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
	z-index: 5;
    text-align:center;
	margin: .5em 0 0 0;
}
.slick-dots li {
    display:inline-block;
	margin:0 .4em;
}
.slick-dots button {
    color: transparent;
    outline: none;
    /*width:.6em;/*ドットボタンのサイズ*/
    height:.6em;/*ドットボタンのサイズ*/
    display:block;
    /*border-radius:50%;*/
	border: 0;
    background:#ccc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
波線区切りエリア https://www.shapedivider.app/
===================================*/
.bg_wavy_l01,.bg_wavy_l02 {
    position: absolute;
	bottom: calc(0px - 4vw - 4em);
    width: 100vw;
    overflow: hidden;
    line-height: 0;
	z-index: 1;
}
.bg_wavy_l01 svg,.bg_wavy_l02 svg {
    position: relative;
    display: block;
    width: calc(144% + 1.3px);
    height: calc(4vw + 4em);
}
.bg_wavy_l01 .shape-fill {fill: var(--color_l01);}
.bg_wavy_l02 .shape-fill {fill: var(--color_l02);}

/* --------------------------------------------- */
/* -------------------- 横長 -------------------- */
/* --------------------------------------------- */
/* 横長 */
@media (orientation: landscape){
body#work main article .inner_width{
	flex-direction: row;
	width: 86vw;
	}
	body#work main article:first-of-type .inner_width{
			margin-top: calc(4vw + 4em);
		}
body#work main article .inner_width div.explanation{
	margin-right: 2em;
	}
body#work main article .inner_width .sample_area {
	width: 50%;/*各スライダー全体の横幅(4箇所)と共通*/
	height: 80vh;/*スライダー全体の縦幅(3箇所)*/
	}
body#work main article .inner_width .sample_area_fit img{
	width: 50vw;/*各スライダー全体の横幅(4箇所)と共通*/
	max-width: 600px;
	}
body#work main article#mov iframe.yt16_9{
	width: 50vw;
	height: auto;
	aspect-ratio: 16 / 9;
	max-width: 600px;
	}
.slider {
    position:relative;
	height: 80vh;/*スライダー全体の縦幅(3箇所)*/
	}
.slider-item {
    width: 50%;/*各スライダー全体の横幅(4箇所)*/
    height:80vh;/*各スライダー全体の縦幅(3箇所)*/
	}

body#work main article#other div.inner_width{
    margin-top: calc(2vw + 2em);
	}
body#work main article#other div.inner_width div.other_works{
    display: flex;
	flex-direction: row;
	width: 26em;
	}
	body#work main article#other div.inner_width div.other_works ul:first-of-type{
		margin-right: 3em;
		}
body#work main article#other div.inner_width div.tools{
	display: flex;
    flex-direction: row;
    }
	body#work main article#other div.inner_width div.tools ul:first-of-type{
		margin-right: 3em;
		}
body#work main article#other h2{
	width:20em;
	}
	body#work main article#other h2:before,
	body#work main article#other h2:after {
	width: 6em;
	}
	body#work main article#other div.inner_width div.tools{
		width: 20em;
		}
}