@charset "UTF-8";

header { background-color:#fefefe; padding-top:60px; padding-bottom:40px; }

h1 { font-size:28px; font-weight: normal; text-indent: 0.5em; letter-spacing: 0.5em; margin:auto; text-align:center; padding-top:40px; position:relative; }
h1::before { content: ""; display: block; position: absolute; width:50px; height:37px; top:0; left:50%; transform: translateX(-50%); background:url("../img/icon_img01.png"); background-repeat: no-repeat; background-size: contain; }
h1::after { content: ""; display: none; }
@media (max-width:900px) {
    header { padding-top:50px; padding-bottom:30px; }
    h1 { font-size:21px; padding-top:26px; }
    h1::before { width:32px; }
}

div#main_img { position:relative; height:240px; z-index: -1; }
div#main_img::before { content: ''; position:fixed; width:100%; height:50vh; z-index: -1; top:0; background:url("../img/main_item.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat;  }
div#main_img::after { content: ''; display: block; position:absolute; left:0; bottom:-10px; width:100%; height: 20px; background: linear-gradient(to right, #cdf4f4, #99c2c4); }

@media (max-width:900px) {
    div#main_img { height:150px; }
    div#main_img::after { height:10px; bottom:-5px; }
}


div#logo_icon { position:fixed; left:30px; top:30px; width:35%; max-width:250px; z-index: 10000; }
div#logo_icon img { width:100%; }
@media (max-width:900px) {
    div#logo_icon { top:15px; left:20px; }
}

div#item_block { margin:auto; padding-top:10px; padding-bottom:100px; width:100%; position: relative; background:linear-gradient(to bottom, #fefefe 0%, #ecf4f4 22%, #cbe3e5 100%); }
div.item_area { width:84%; max-width:900px; margin:auto; padding:50px 10px 30px; background-color:#fafdff; border-radius: 3px 30px; box-sizing: border-box; }
div.title_block { margin-top:80px; margin-bottom:40px; padding:40px; background-color:#fafdff; position:relative; z-index: 1; }
div.title_block::after { content:""; position:absolute; width:100%; height:100%; top:0; left:0; background:url('../img/item/bg.jpg'); background-position: center; background-size: cover; z-index: -1; opacity: 0.5; }
div.title_block > div { border:solid 1px #2199bf; border-radius: 3px 30px; padding:38px 40px 48px; text-align:center; }
div.title_block > div h2 { font-size:34px; font-weight: normal; letter-spacing: 0.4em; padding-bottom:10px; margin-bottom:20px; display: inline-block; width:200px; border-bottom:solid 2px; border-image: linear-gradient(to right, rgb(157, 226, 227) 80%, #2199bf 80%); border-image-slice: 1; }
div.title_block > div h2::first-letter { font-size:40px; color:#2199bf; }
div.title_block > div p { font-size:16px; letter-spacing: 2px; line-height: 2; }
@media (max-width:900px) {
    div#item_block { padding-top:0; padding-bottom:80px; }
    div.item_area { padding:6% 4%; margin-bottom:50px; }
    div.title_block { margin-top:0; padding:26px; }
    div.title_block > div { border-radius: 2px 20px; padding:23px 25px 33px; }
    div.title_block > div h2 { font-size:24px; letter-spacing: 0.3em; padding-bottom:6px; margin-bottom:14px; }
    div.title_block > div h2::first-letter { font-size:30px; }
    div.title_block > div p { font-size:14px; text-align:left; letter-spacing: 1px; }
}


div.item_area div.itemTxt { margin:auto; margin-bottom:30px; text-align:center; }
div.item_area div.itemTxt p { letter-spacing: 1px; margin-bottom:6px; }
div.item_area div.itemTxt > a.link_btn { width:50%; font-size:16px; letter-spacing: 0.1em; color:#2199bf; border:solid 1px #2199bf; background:linear-gradient(to right, #2199bf 50%, #fefefe 50%); background-size: 200% 100%; background-position: top right; display: block; margin:5px auto 30px; padding:5px; position: relative; transition: all 0.6s ease-in-out; }
div.item_area div.itemTxt > a.link_btn:hover { color:#fefefe; background-position: top left; }
div.item_area div.itemTxt > a.link_btn::before { content:""; top:50%; right:1em; transform: translateY(-50%) rotateZ(-45deg); position: absolute; width:8px; height:8px; border-bottom: solid 1px #2199bf; border-right: solid 1px #2199bf; transition: all 0.6s ease-in-out; }
div.item_area div.itemTxt > a.link_btn:hover::before { right:0.5em; border-bottom: solid 1px #fefefe; border-right: solid 1px #fefefe; }
@media (max-width:900px) {
    div.item_area div.itemTxt p { font-size:12px; }
    div.item_area div.itemTxt > a.link_btn { width:80%; font-size:15px; }
}


div.item_area div.itemFlex { display: flex; width:100%; max-width:700px; margin:auto; flex-wrap: wrap; justify-content: flex-start; gap:20px 35px; margin-bottom:50px; }
div.item_area div.itemFlex > div { width:210px; height: auto; text-align:center; margin-bottom:20px; }
div.item_area div.itemFlex > div > img { width:210px; height: 210px; object-fit: cover; }
div.item_area div.itemFlex > div > h3 { font-size:20px; letter-spacing: 1px; font-weight: normal; line-height: 1.3; margin-top:10px; margin-bottom:5px; }
div.item_area div.itemFlex > div > h3.space_s { font-size:19px; letter-spacing: 0; }
div.item_area div.itemFlex > div > h3 > span { font-size:16px; letter-spacing: 0; }
div.item_area div.itemFlex > div > h3 > span.font_small { font-size:14px; margin-right:10px; }
div.item_area div.itemFlex > div > h3.space_s > span { font-size:15px; }
div.item_area div.itemFlex > div > p { font-size:14px; letter-spacing: 1px; }
div.item_area div.itemFlex > div > p > span { font-size:20px; }
@media (max-width:900px) {
    div.item_area div.itemFlex { justify-content: center; margin-bottom:0; gap:20px 15px; }
    div.item_area div.itemFlex > div { width:44%; }
    div.item_area div.itemFlex > div > img { width:100%; height:auto; }
    div.item_area div.itemFlex > div > h3 { font-size:16px; }
    div.item_area div.itemFlex > div > h3.space_s { font-size:13px; }
    div.item_area div.itemFlex > div > h3 > span { font-size:12px; }
    div.item_area div.itemFlex > div > h3 > span.font_small { font-size:12px; margin-right:0; line-height: 1.4; display: block; }
    div.item_area div.itemFlex > div > h3.space_s > span { font-size:11px; }
    div.item_area div.itemFlex > div > p { font-size:12px; }
    div.item_area div.itemFlex > div > p > span { font-size:18px; }
}