@charset "UTF-8";


#d-fender article { max-width: 1200px; margin: 100px auto;}
#d-fender img { height: auto; max-width: 100%; max-height: 100%;}

@media screen and (max-width:1199px){
	#d-fender article { margin: 100px 10px;}
}

@media screen and (max-width:699px){
	#d-fender article { margin: 50px 10px;}
}


/**============================================================================================**/
/*共通*/
#df-innder { color: #000; font-family: "Noto Sans JP", sans-serif; font-style: normal; line-height: 1.6em;}
#df-innder section { margin: 0 0 150px; padding: 0 30px;}

#df-innder h2 {
	margin: 0 0 50px; padding: 0 10px 5px;
	border-bottom: solid 1px #002864;
	color: #002864; font-size: 30px; text-align: left;}
#df-innder h2 span {
	margin: 0 0 0 10px;
	font-size: 22px; font-weight: 500;}
#df-innder h3,
#df-innder h4 { color: #002864;}

#df-innder .flex { display: flex;}

@media screen and (max-width:699px){
	#df-innder section { margin: 0 0 100px; padding: 10px;}
	
	#df-innder h2 { margin: 0 0 30px; font-size: 24px;}
	#df-innder h2 span { font-size: 18px;}
	#df-innder .flex { display: block;}
}


#df-innder table { border-collapse: collapse; border-color: #ddd; font-size: 16px;}

#df-06 a,
#df-08 a { color: cadetblue; text-decoration: underline;}
#df-06 a:hover,
#df-08 a:hover { color: orange;}


/**============================================================================================**/
/*メイン画像*/

/*文字*/
#main-img { position: relative;}
#main-img .posi-abs {
	top: 20px; left: 95px;
	color: #fff; font-weight: 900;}
#main-img .posi-abs p { text-shadow: 2px 2px 5px #111;}
#main-img .posi-abs p:nth-of-type(1) { margin: 0 0 10px; font-size: 50px;}
#main-img .posi-abs p:nth-of-type(1) span { font-size: 18px; font-weight: 400;}
#main-img .posi-abs p:nth-of-type(2) { margin: 0 0 30px; font-size: 24px;}
#main-img .posi-abs p:nth-of-type(3) { font-size: 18px; font-weight: 400;}
#main-img .posi-abs p:nth-of-type(3) span {display: none;}

@media screen and (max-width:1099px){
	#main-img .posi-abs { left: 45px;}
	#main-img .posi-abs p:nth-of-type(3) span {display: inline;}
}

@media screen and (max-width:699px){
	#main-img .posi-abs { left: 15px;}
	#main-img .posi-abs p:nth-of-type(1) { margin: 0 0 5px; font-size: 46px; line-height: 1em;}
	#main-img .posi-abs p:nth-of-type(1) span { display: block; margin: 10px 0 0; font-size: 16px;}
	#main-img .posi-abs p:nth-of-type(2) { margin: 0 0 15px; font-size: 20px;}
	#main-img .posi-abs p:nth-of-type(3) { font-size: 16px;}
}

/*画像*/
#main-img ul { z-index: -1; margin: 0;}
#main-img ul li { height: 800px; background-repeat: no-repeat; background-size: auto; background-position: center;}

#main-img ul.img-list li.img01 { background-image: url(https://www.hantglobal.com/products/dock-fender/images/main-01.jpg);}
#main-img ul.img-list li.img02 { background-image: url(https://www.hantglobal.com/products/dock-fender/images/main-02.jpg);}
#main-img ul.img-list li.img03 { background-image: url(https://www.hantglobal.com/products/dock-fender/images/main-03.jpg);}
#main-img ul.img-list li.img04 { background-image: url(https://www.hantglobal.com/products/dock-fender/images/main-04.jpg);}
#main-img ul.img-list li.img05 { background-image: url(https://www.hantglobal.com/products/dock-fender/images/main-05.jpg);}

@media screen and (max-width:999px){
	#main-img ul li {height: 600px; background-size: auto 100%;}
	#main-img ul.img-list li.img02 { background-position: 90% 0%;}
	#main-img ul.img-list li.img03 { background-position: 90% 0%;}
	#main-img ul.img-list li.img05 { background-position: 10% 0%;}
}

@media screen and (max-width:699px){
	#main-img ul li {height: 600px; background-size: auto 100%;}
	#main-img ul.img-list li.img02 { background-position: 70% 0%;}
	#main-img ul.img-list li.img03 { background-position: 70% 0%;}
	#main-img ul.img-list li.img05 { background-position: 20% 0%;}
}


/**============================================================================================**/
/*選ばれる3つの理由*/

#df-01 { justify-content: space-around;}

#df-01 h3 { 
	margin: 0 0 10px;
	font-size: 24px; font-weight: 600; line-height: 1.2em;}

@media screen and (max-width:699px){
	#df-01 h3 { font-size: 20px;}
}


/*#df-01、#df-06、#df-09共通*/
#d-fender .icon {display: flex;}
#d-fender .icon::before {
	content: '';
	display: inline-block; margin: 0 15px 0 0;
	background-repeat: no-repeat; background-size: cover; background-position: center;}
#d-fender .icon > div { width: calc(100% - 75px);}/*アイコン60px + マージン10px*/

#df-01 .icon { max-width: 30%;}
#df-01 .icon::before {width: 60px; height: 60px;}
#df-01 .icon:nth-of-type(1)::before { background-image: url(https://www.hantglobal.com/products/dock-fender/images/icon-01.png);}
#df-01 .icon:nth-of-type(2)::before { background-image: url(https://www.hantglobal.com/products/dock-fender/images/icon-02.png);}
#df-01 .icon:nth-of-type(3)::before { background-image: url(https://www.hantglobal.com/products/dock-fender/images/icon-03.png);}

@media screen and (max-width:699px){
	#df-01 .icon { max-width: 100%;}
	#df-01 .icon:not(:first-of-type) { margin: 50px 0 0;}
}


/**============================================================================================**/
/*SPEC製品仕様*/

#df-02 > img { display: block; max-width: 70%; margin: 0 0 60px;}

#df-02 .flex { justify-content: space-between; align-items: center;}

#df-02 table { max-width: calc(50% - 30px);}
#df-02 table td,
#df-02 table th { padding: 5px 10px;}
#df-02 table th { background: #eee; word-break: keep-all;}

#df-02 .flex > img { max-width: calc(50% - 15px); height: 100%;}

@media screen and (max-width:699px){
	#df-02 > img,
	#df-02 table,
	#df-02 .flex > img { max-width: 100%;}
	
	#df-02 > img,
	#df-02 table { margin: 0 0 40px;}
}


/**============================================================================================**/
/*FEATURES製品特長 (「取付方法(#df-05)」と一部共通)*/

#df-03 li,
#df-05 li {
	max-width: 720px; margin: 0 0 60px; padding: 30px;
	border-radius: 5px; box-shadow: 0 0 30px 10px #eeeeee88;}

#df-03 h3,
#df-05 h3 { margin: 0 0 15px; font-size: 28px; font-weight: 400; line-height: 1.1em;}
#df-03 h3 span { font-size: 22px; font-weight: 500;}

#df-03 img { margin: 0 0 15px;}

@media screen and (max-width:699px){
	#df-03 li,
	#df-05 li { margin: 0 0 50px; padding: 20px;}
	
	#df-03 h3,
	#df-05 h3 { font-size: 24px;}
	#df-03 h3 span { font-size: 18px;}
}


/**============================================================================================**/
/*設置例*/

#df-04 { justify-content: space-between;}
#df-04 > div {
	box-sizing: border-box; width: calc(50% - 15px); padding: 30px;
	border-radius: 5px; box-shadow: 0 0 30px 7px #eeeeee88;}

@media screen and (max-width:699px){
	#df-04 > div { width: 100%; margin: 0 0 30px; padding: 20px;}
}


#df-04 h3,
#df-04 h4 { font-weight: 400;}
#df-04 h3 { margin: 0 0 30px; font-size: 24px;}
#df-04 h4 { margin: 0 0 5px; font-size: 18px;}

@media screen and (max-width:699px){
	#df-04 h3 { font-size: 20px;}
	#df-04 h4 { font-size: 16px;}
}


#df-04 > div img {margin: 0 0 15px;}

#df-04 table { table-layout: fixed;}
#df-04 table tr:last-of-type { background: #eee; color: #002864; font-weight: 600;}
#df-04 .flex { justify-content: space-between; padding: 5px 10px;}
#df-04 .flex p span { margin: 0 5px 0 0; font-size: 22px;}

@media screen and (max-width:699px){
	#df-04 .flex { display: flex;}
}


/**============================================================================================**/
/*取付方法*/

#df-05 > p { margin: 0 0 50px;}

/*矢印*/
#df-05 li { position: relative;}
#df-05 li:not(:first-of-type)::before {
	content: '';
	position: absolute; top: -35px; left: calc(50% - 25px);
	width: 0; height: 0;
	border-style: solid;  border-right: 25px solid transparent; border-left: 25px solid transparent;
	border-top: 15px solid #002864; border-bottom: 0;
}

@media screen and (max-width:699px){
	#df-05 > p { margin: 0 0 30px;}
	#df-05 li:not(:first-of-type)::before { top: -30px;}
}


/**============================================================================================**/
/*取付ポイント*/

#df-06 > p { margin: 0 0 50px;}

#df-06 .flex { justify-content: space-between;}

#df-06 img,
#df-06 .icon { width: calc(50% - 30px);}
#df-06 .icon::before {
	width: 60px; height: 55px;
	background-image: url(https://www.hantglobal.com/products/dock-fender/images/icon-04.png);}

#df-06 .ta_c {
	margin: 15px 0 0; padding: 15px 30px;
	background: #eee; color: #002864; font-weight: 600;}

#df-06 .ta_c p { display: inline-block; text-align: left; line-height: 1.5em;}
#df-06 .ta_c p a { word-break: break-all;}

@media screen and (max-width:1199px){
	#df-06 img { width: calc(50% - 10px); height: 100%;}
	#df-06 .icon { width: calc(50% - 10px);}
}

@media screen and (max-width:699px){
	#df-06 > p { margin: 0 0 30px;}
	
	#df-06 img,
	#df-06 .icon { width: 100%;}
	#df-06 img { margin: 0 0 30px;}
}


/**============================================================================================**/
/*FAQよくあるご質問*/

#df-07 li:not(:first-child) { margin: 60px 0 0;}

#df-07 li p:first-of-type {
	display: flex; margin: 0 0 10px;
	color: #002864; font-size: 20px; font-weight: 400;}
#df-07 li p:first-of-type::before{ content: 'Q.';}

#df-07 li p:last-of-type {
	display: flex;
	font-size: 18px;}
#df-07 li p:last-of-type::before { content: 'A.';}

#df-07 li p::before { display: inline; width: 20px; margin: 0 10px 0 0; text-align: right;}

@media screen and (max-width:699px){
	#df-07 li:not(:first-child) { margin: 40px 0 0;}
	
	#df-07 li p:first-of-type { margin: 0 0 5px; font-size: 18px;}
	#df-07 li p:last-of-type { font-size: 16px;}
	
	#df-07 li p::before { width: 15px;}
}


/**============================================================================================**/
/*購入方法*/

#df-08 .flex { display: flex; flex-wrap: wrap; justify-content: space-evenly;}
#df-08 .flex > div { width: calc(50% - 60px); padding: 30px 0;}
#df-08 .flex > div:nth-of-type(1),
#df-08 .flex > div:nth-of-type(2) {margin: 0 0 30px; border-bottom: solid 1px #ddd;}
#df-08 .flex > div .ta_c { display: flex; justify-content: space-around; align-items: center; margin: 10px 0 0;}

@media screen and (max-width:699px){
	#df-08 .flex { display: block;}
	#df-08 .flex > div { width: 100%;}
	
	#df-08 .flex > div:nth-of-type(3) {margin: 0 0 30px; border-bottom: solid 1px #ddd;}
}


/**============================================================================================**/
/*お問い合わせ*/

#df-09 .icon { justify-content: center;}
#df-09 .icon > div { display: inline-block; max-width: 560px;}
#df-09 .icon::before {
	width: 60px; height: 40px;
	background-image: url(https://www.hantglobal.com/products/dock-fender/images/icon-05.png);}

#df-09 a {
	display: block; margin: 15px auto 0; padding: 10px;
	background: #002864; color: #fff; font-size: 18px; text-decoration: underline; text-align: center;}

@media screen and (max-width:699px){
	#df-09 .icon > div { max-width: 100%;}
}


/**============================================================================================**/
/*products*/

#products { padding: 100px 0 0; border-top: solid 1px #ddd;}

@media screen and (max-width:1199px){
	#products { padding: 100px 10px 0;}
}

@media screen and (max-width:699px){
	#products { padding: 50px 10px 0;}
}


/*以下、products.css流用*/

#products01 { position: relative; margin: 0 0 30px;}
#products01 h2 { margin: 0 0 20px;}
#products01 p { margin: 0 0 60px; font-size: 16px;}

@media screen and (max-width:699px){
    #products  { margin: 50px auto;}
    #products01 h2 { font-size: 25px;}
    #products01 p { margin: 0 0 30px; font-size: 14px;}
}


#products01 ul { max-width: 750px; margin: 0 auto; font-size: 0;}

#products01 li { 
    display: inline-block;
    box-sizing: border-box; width: 150px; margin: 0 0 5px; padding: 0; 
    font-size: 12px; line-height: 1.5em; text-align: center; vertical-align: top;}

#products01 li img { width: 85px; }

@media screen and (max-width:779px){
    #products01 ul { max-width: 600px;}
}

@media screen and (max-width:629px){
    #products01 li { width: 33.33%; padding: 0 5px;}
}


/* アコーディオン 開閉ボタン */
label[for="menu_bar01"] {
    display: inline-block; position: relative; 
    padding: 8px 20px 8px 0;
    cursor: pointer;}
label[for="menu_bar01"]::after {
    content: '';
    position: absolute; top: 15px; right: 0;
    width: 0;  height: 0;
    border-style: solid;  border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #000;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);}

/* アコーディオン 表示・非表示エリア */
.area1 {
    position: absolute; overflow-y: hidden; z-index: 1;
    width: 100%; max-height: 0; margin: 0; padding:0; 
    border:none; background: #fff;
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

/* アコーディオンをクリックした場合 */
#menu_bar01:checked ~ .area1 {
    height:auto; max-height: 560px;  padding: 0 0 20px; 
    opacity: 1;
    box-shadow: 0px 6px 6px -6px rgba(0,0,0,0.35);}
    
#menu_bar01:checked ~ label[for="menu_bar01"]::after {
    content: '×';
    top: 8px; right: -5px;
    width:auto; height:auto; border:none; 
    color: #000; font-size: 26px; font-weight: 790; line-height: 1.0em;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}



@media screen and (max-width:1229px){
    #menu_bar01:checked ~ .area1 { max-height: 560px;}
}

@media screen and (max-width:716px){
    #menu_bar01:checked ~ .area1 { max-height: 810px;}
}

@media screen and (max-width:545px){
    #menu_bar01:checked ~ .area1 { max-height: 850px;}
}


/**========================================**/

#products02 ul { position: relative; z-index: 0; font-size: 0;}

#products02 li { 
    display: inline-block;
    box-sizing: border-box; width: 25%; margin: 0 0 60px; padding: 0 10px; 
    font-size: 14px; line-height: 1.5em; vertical-align: top;}


@media screen and (max-width:799px){
    #products02 li { width: 33.33%;}
}

@media screen and (max-width:499px){
    #products02 li { 
        width: 50%; margin: 0 0 40px;
        font-size: 12px; line-height: 1.5em;}

}

/* LastUp2026.05.20_kobayashi */