﻿@charset "utf-8";/* CSS Document *//*大枠のcss*/#outer{width: 1260px;margin: 0 auto;font-size: 18px;}/*パンくず*/.navitopicpath_{overflow: hidden;font-size: 12px;margin: 15px 10px 25px;}#bread-crumb-list{width: 100%;float: left;overflow: hidden;}#bread-crumb-list li{display: inline;}.navitopicpath_ a{margin: 0 0.5em;white-space: nowrap;}/*共通*/h2{text-align: center;font-size: 32px;font-weight: bold;margin-bottom: 20px;}h3{font-size: 28px;font-weight: bold;margin-bottom: 20px;}.sp{display: none;}/*見出し*/#outer .top_parts{width: 100%;background-color: #0081A2;/*背景色*/display: flex;justify-content: space-between;margin-bottom: 60px;}#outer .top_parts .top_txt{width: 54%;color: #FFFFFF;/*文字色*/display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;padding: 0 0 0 0px;}.top_txt p{width: 90%;margin:0 auto;}#outer .top_parts .top_txt h1{font-size: 2.5em;text-align: center;font-weight: bold;line-height: 1.2;margin-bottom: 5px;}#outer .top_parts .top_txt p{padding-top: 10px;font-size: 0.8em;}#outer .top_parts .top_img{width: 44%;}#outer .top_parts .top_img img{width: 100%;}/* サイズ選び方*/.size_ex{width: 90%;padding:20px;margin:auto;background-color: #EFFCFF;border-radius: 30px;position: relative;margin-bottom: 60px;}.size_ex h2{margin-bottom: 20px;}.ex {display: flex; /*横並び*/align-items: center;padding-bottom: 20px;margin: auto;}.size_ex .image {text-align: center;width: 400px; /*画像サイズ指定*/margin: 0 auto;padding: 0px;overflow: hidden;position: relative;}.ex .text {width: 50%;}/*ページジャンプのcss*/.jump{width: 100%;background-color: #ffffff;margin: 0 auto 50px;box-sizing: border-box;top: 0;z-index: 2;padding-bottom: 0;padding-top: 0;max-width: 100%;position: -webkit-sticky; /* Safari */position: sticky;}.genre_menu{display: flex;flex-flow: row;margin: 0;width: 100%;box-sizing: border-box;list-style: none;padding: 0;justify-content: space-between;}.global_item {display: flex;justify-content: space-evenly;text-decoration: none;height:50px;width:300px;background: #0081A2;padding: 5px;align-items: center;font-size: 18px;font-weight: bold;color: #fff!important;position: relative;margin:auto;}.global_item::after {content: '';width: 7px;height: 7px;border-bottom: 4px solid #fff;border-right: 4px solid #fff;position: absolute;left:80%;transform: rotate(45deg);}.global_item:hover {opacity: 0.7;color: #fff;}.title {padding: 0.25em 0.5em;/*上下 左右の余白*/position:relative;padding-top: 60px;margin-top:-60px;}.title::before{content: "┃";color:#0081A2;}/*button装飾*/.link_fc{width: 98%;background-color: #0081A2;border: solid 3px #0081A2;text-align: center;padding:20px 0px;margin: auto;border-radius: 15px;line-height: 15px;height: 10px;}.link_fc:hover{opacity: 0.7;}.link_fc a{display: block;text-decoration: none;font-size:24px;font-weight: bold;color:#fff!important;}.size_search{margin-bottom: 60px;}.s_item{margin-bottom: 40px;}.s{border: solid 2px #D3D3D3;border-top: none;margin: 0px 0px 40px 0px;padding-top: 0px 0px 10px 0px;display: flex;}.btn , .btn1{width: 98%;margin: auto;display: flex;flex-wrap: wrap;border-radius: 20px;padding-bottom: 20px;}.btn {justify-content: space-between;}.btn h4 , .btn_item , .btn1 h4 , .btn_one{display: block;width: calc(calc(100% - 60px)/5);font-size: 18px;height: 60px;line-height: 60px;text-align: center;}.btn h4, .btn1 h4{background-color: #D4F2F9;font-weight: bold;}.btn_item , .btn_one{background: #F1F1F1;}.btn_one{margin-left: 15px;}.btn_item:hover , .btn_one:hover{opacity: 0.7;}.btn_item a ,.btn_one a{text-decoration: none;color: #000!important;text-align: center;display: block;}/*クリスタルパックを規格サイズから探す*/.popularity{margin-bottom: 60px;}/*div class="wrapper_pop"自体をどうするかの指定*/.wrapper_pop{width: 1260px;margin: 0 auto;display: flex;/*flex-boxという要素を横並べをする為の指定*/justify-content: space-between;/*中の要素をいいかんじに両端揃えにする*/flex-wrap: wrap;/*要素がはみ出す大きさなら改行する*/}/*div class="wrapper_pop"内のdiv class="twt_img"をどうするかの指定*/.wrapper_pop .twt_img{width: 15%;/*隙間空けて4個並べにする*/box-sizing: border-box;border: solid 1px #cccccc;margin-bottom: 10px;padding: 10px;}/*4個並べでも左に寄るおまじない（深く考えない）*/.wrapper_pop::after,.wrapper_pop::before{content: "";display: block;width: 15%;/*.wrapper_pop .three_imgのwidthと同じにする事！！！*/height: 0;}.wrapper_pop::before{order: 1;}/*div class="twt_img"内の_imgの指定*/.wrapper_pop .twt_img ._img{width: 100%;/*幅を指定*/}.wrapper_pop .twt_img ._img img{width: 100%;/*imgをレスポンシブにする為のおまじない*/}/*div class="twt_img"内の_txtの指定*/.wrapper_pop .twt_img ._txt{width: 100%;/*幅を指定*/}/*div class="_txt"の中にあるh3の装飾*/.twt_img ._txt h3{font-size: 18px;color: #005797;font-weight: bold;margin: 0px;border: none;text-align: center;}.twt_img ._txt p{text-align: center;background-color: #FBFF6C;}.twt_img a{text-decoration: none;color: #000!important;text-align: center;display: block;}/*div class="_txt"の中にあるpの装飾*/.twt_img ._txt p{line-height: 1.5;/*行間の調整　でかければでかい程空く*/}/*クリスタルパックの種類について*/.type{margin-bottom: 60px;}.type h2{margin-bottom: 20px;}.type p{margin-bottom: 40px;}.type_sec{width: 1260px;margin: auto;box-sizing: border-box;padding: 10px;display: flex;/*flex-boxという要素を横並べをする為の指定*/justify-content: space-between;/*中の要素をいいかんじに両端揃えにする*/flex-wrap: wrap;/*要素がはみ出す大きさなら改行する*/}.sec_text{width: 70%;/*幅　100 - ._imgサイズ分の% - 1 でいいかんじに隙間が空く*/padding: 10px;box-sizing: border-box;margin:auto;}.sec_text h4{font-size: 18px;font-weight: bold;margin-bottom: 5px;}.sec_text a{color: #005797!important;}/*div class="_txt"の中にあるpの装飾*/.sec_text p{line-height: 1.5;/*行間の調整　でかければでかい程空く*/margin:auto;}/*div class="one_img"の中にあるdiv class="_img"の装飾*/.sec_img ._img{width: 30%;/*幅　100 - _txtサイズ分の% - 1 でいいかんじに隙間が空く*/}.sec_img ._img img{width: 100%;/*imgをレスポンシブにする為のおまじない*/}.center{font-weight: bold;margin-bottom: 10px;}/*関連記事のところ*/.column{width: 100%;margin-bottom: 45px;}.column h3{font-size: 1.5em;font-weight: bold;margin: 35px 0 15px;}.column h3::before{content: "┃"}.contents_01{display: flex;flex-wrap: wrap;/*	justify-content: space-between;*/margin: 0 auto;}.contents_01 .item_{width: 32%;box-sizing: border-box;/*	border: solid 1px #cccccc;*/display: flex;flex-direction: column;}.contents_01::after{content: "";display: block;width: 32%;height: 0;}.contents_01 .item_ ul.btns_{margin-top: auto;margin-bottom: 12px;padding: 0 10px;}.contents_01 .item_ ul.btns_ li.btn_gazou_{position: relative;}.item_ .btn_gazou_ a{display: block;position: relative;padding: 10px;color: #ffffff;background-color: #0081A2;font-weight: bold;border-radius: 20px;text-align: center;text-decoration: none;font-size: 0.8em;}.column ul.tokusyu{display: flex;flex-wrap: wrap;justify-content: space-between;box-sizing: border-box;width: 100%;list-style: none;margin: 0 auto;}.column ul.tokusyu li{width: 23%;margin-bottom: 10px;}.column ul.tokusyu li img{width: 100%;height: auto;}.column ul.tokusyu::before{content: "";display: block;width: 23%;order: 1;}.column ul.tokusyu::after{content: "";display: block;width: 23%;}/*スマホの設定*/@media screen and (max-width: 768px) {/*body * {outline: red 1px solid;}*//*大枠*/#outer{width: 100%;}/*見出し*/#outer .top_parts{flex-direction: column-reverse;margin-bottom: 20px;}#outer .top_parts .top_txt{width: 100%;padding: 15px;}#outer .top_parts .top_txt h1{font-size: 1.4em;padding: 5px 5px 0 5px;}#outer .top_parts .top_txt p{font-size: 1em;padding: 5px;}#outer .top_parts .top_img{width: 100%;}#outer .top_parts .top_img img{width: 100%;}/*全体*/.top , .size_ex , .size_search , .popularity , .type{margin-bottom: 30px;}h2{font-size: 1.2em;margin-bottom: 10px;}h3{font-size: 1em;margin-bottom: 5px;}p{font-size: 0.8em;}.sp{display:block;}/*サイズの選び方*/.size_ex h2{margin-bottom: 10px;}.ex .text{width: 90%;}.size_ex .image{width: 80%;}.ex{flex-direction: column;padding: inherit;}.text{margin-top: 10px;}.size_ex{padding: 5px;}/*ページジャンプ*/#outer .jump{width: 100%;background-color: #ffffff;box-sizing: border-box;border-radius: 1rem;position: static;}#outer .jump ul.genre_menu{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;font-size: 0.9em;border-right-style: none;border-left-style: none;border-bottom-style: none;}#outer .jump ul.genre_menu li{flex: 0 0 50%; /* これにより2列になります */box-sizing: border-box;}#outer .jump ul.genre_menu li a.global_item{width: 100%;height: 30px;line-height: 30px; /* テキストを中央に配置するため */box-sizing: border-box;border-right: solid 1px #90A6A7;margin-bottom: 3px;display: block;display: flex;align-items: center;justify-content: center;}.jump ul.genre_menu li:nth-child(2n+1) a.global_item{border-right: none;}#outer .jump ul.genre_menu a.global_item{width: 100%;margin: 0 auto;padding: 5px 7px;font-size: 12px;text-align: center;}.global_item::after {list-style: none;border-bottom: 2px solid #fff;border-right: 2px solid #fff;heigt: 50%;left: 85%;}.size_search h3{font-size:1em;padding-top:50px;}.size_b{width: 95%;margin: auto;}.btn h4, .btn1 h4 , .btn_item ,.btn_one{font-size:0.8em;height:30px;line-height: 30px;}.btn h4, .btn1 h4{margin: auto;width: 100%;margin-bottom: 5px;}.btn_item , .btn_one{width: calc(calc(100% - 5px)/2);margin-bottom: 5px;}.btn_one{margin-left: 0;}.btn1::before {content: "";display: block;width: calc(calc(100% - 5px)/2);height: 0px;order: 1;}.btn1::after {content: "";display: block;width: calc(calc(100% - 5px)/2);height: 0px;}.link_fc{width: 98%;margin: auto;padding:10px 0px;line-height: 10px;}.link_fc a{font-size:0.7em;}/*規格サイズのとこ*/.wrapper_pop{width: 100%;/*幅を100%にする事でブラウザ幅にあわせる*/}.wrapper_pop .twt_img{width: 49%;/*幅を49%にする事で2個並べにする*/}.wrapper_pop::after,.wrapper_pop::before{content: none;/*2個並べはおまじない不要なので解除する*/}.twt_img a {display: flex;align-items: center;}._txt{margin-left: 5px;}.twt_img ._img {flex: 4;}.twt_img ._txt {flex: 6;}.twt_img ._txt h3,.twt_img ._txt p {font-size: 0.8em;}/*クリスタルパックの種類について↓*/.sec_img{width: 80%;/*幅を100%にする事でブラウザ幅にあわせる*/}.type p{margin: auto;margin-bottom: 20px;width: 95%;}.sec_img ._txt{width: 100%;/*幅を100%にする事でブラウザ幅いっぱいになる*/margin-bottom: 10px;/*画像とくっついちゃうのが嫌なら隙間を空ける*/}.sec_img img{width: 100%;/*幅を100%にする事でブラウザ幅いっぱいになる*/}.type_sec{padding: inherit;width: 100%;flex-direction: column;align-items: center;}.sec_text{width: 100%;margin-bottom: 20px;}.sec_text h4 ,.center{text-align: center;}/*関連記事のとこ*/.column{width: 100%;}.column h3{padding: 5px;font-size: 1.3em;margin: 0;}.column h3::before{content: "┃"}.contents_01{padding: 0 10px;}.contents_01 .item_{width: 100%;margin: 5px auto;padding: 0;}.contents_01::after{content: none;}.contents_01 .item_ ul.btns_{font-size: 0.8em;width: 100%;margin-bottom: 0;padding: 0;}.contents_01 .item_ ul.btns_ li.btn_gazou_{position: relative;}.item_ .btn_gazou_ a{padding: 10px 0;background-color: #0081A2;border-radius: 100vh;color: #ffffff;font-weight: bold;text-align: center;display: block;position: relative;transition: .3s;margin: 5px;}.column ul.tokusyu{width: 96%;margin: 0 auto;padding: 0;float: none;}.column ul.tokusyu li{width: 49%;}}/*@mediaの閉じタグ*/