* { margin: 0px; padding: 0px; } ul{ list-style: none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------- スマホ且つ縦画面用----------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ @media (max-width: 767px) { /*PC用メニュー非表示----------------------------------------------------------------------------------------------------------------------------*/ #menu { display:none; } .tab { display:none; border-top-width: 1px; border-top-style: solid; border-top-color: #000; } #link { display:none; } #add { display:none; } #f_container0 { display:none; } #f_container1 { display:none; } #f_container2 { display:none; } #comment { display:none; } /*スマホメニュー---------------------------------------------------------------------------------------------------------------------------------*/ #ham_background { position:fixed; top:0px; width: 100vw; height: 40px; background-color:#CCC; z-index:2; } #prime_m { font-size: 28px; height: auto; position: absolute; left:10px; line-height:40px; } #prime_s { position: absolute; left:105px; font-size: 13px; line-height:40px; } .ham { position: relative; float:right; width: 40px; height: 40px; cursor: pointer; z-index:1; } .ham_line { position: absolute; left: 10px; width: 20px; height: 2px; background-color: #333333; transition: all 0.3s; } .ham_line1 { top: 12px; } .ham_line2 { top: 20px; } .ham_line3 { top: 28px; } .clicked .ham_line1 { transform: rotate(45deg); top: 20px; } .clicked .ham_line2 { width: 0px; } .clicked .ham_line3 { transform: rotate(-45deg); top: 20px; } .mobile_menu { position: fixed; width: 140px; height: 270px; right:-140px; top:40px; background-color:#FFF; opacity:0.9; transition: all 0.3s; z-index:11; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: center; align-content: center; } .clicked .mobile_menu { right: 0px; } #menu_item1{ text-align:center; order:1; } #menu_item2{ text-align:center; order:2; } #menu_item3{ text-align:center; order:3; } #menu_item4{ text-align:center; order:4; } #menu_item5{ text-align:center; order:5; } #menu_item6{ text-align:center; order:6; } /*本文------------------------------------------------------------------------------------------------------------------------------------------*/ /*インフォメーション*/ #infobox { margin: auto; height: 70px; width: 100vw; position: relative; clear: both; display: flex; margin-top: 60px; } #houses_text { width:100px; height:50px; font-size: 16px; line-height:46px; text-align:center; position: relative; left:15px; top: 2px; color:rgba(0,0,0,1); border: 2px solid #FA0; box-sizing: border-box; } #houses_text a { position: absolute; top: 0; left: 0; height:100%; width: 100%; } #houses_text:hover{ background-color:#FA0; transition-duration: 0.3s; } /*インフォメーション*/ /*要素*/ #sentense { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; text-align: left; width: 300px; height: 50px; position: relative; left:25px; line-height: 1; top: 18px; } #sentense .sentense1 { font-size: 13px; margin-right: 10px; } #sentense .sentense2 { font-size: 10px; } /*要素*/ /*スマホ本体*/ #s_comment { width: 100vw; height: 50px; margin: auto; top: 20px; position: relative; clear: both; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; line-height: 12px; } #s_comment .intro1 { font-size: 12px; margin-left: 12px; } #s_comment .intro2 { font-size: 10px; margin-left: 12px; } #fs_container1 { width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); height: auto; -ms-flex-pack: distribute; justify-content: space-around; position: relative; clear: both; float: left; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; left: 6px; margin-top: 0px; margin-bottom: 20px; } #fs_container2 { width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); height: auto; -ms-flex-pack: distribute; justify-content: space-around; position: relative; clear: both; float: left; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; left: 6px; margin-top: 0px; margin-bottom: 20px; } #fs_squarebox { width: calc( (100vw - 20px) * 1 / 3); width: -webkit-calc( (100vw - 20px) * 1 / 3); width: -moz-calc( (100vw - 20px) * 1 / 3); height: calc( (100vw - 20px) * 1 / 3); height: -webkit-calc( (100vw - 20px) * 1 / 3); height: -moz-calc( (100vw - 20px) * 1 / 3); left:0px; cursor:pointer; } #fs_squarebox .e01 { height:100%; width:100%; } #fs_squarebox .over { width: calc( (100vw - 20px) * 1 / 3); width: -webkit-calc( (100vw - 20px) * 1 / 3); width: -moz-calc( (100vw - 20px) * 1 / 3); height: calc( (100vw - 20px) * 1 / 3); height: -webkit-calc( (100vw - 20px) * 1 / 3); height: -moz-calc( (100vw - 20px) * 1 / 3); overflow: hidden; position: relative; } #fs_squarebox .over .text .caption { font-size: 10px; text-align: center; color: #fff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } #fs_squarebox .over .text { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #fs_squarebox .over:hover .text { opacity: 1; /* マスクを表示する */ } #fs_squarebox .over .text .caption span { font-size: 14.5px; font-weight: lighter; } } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------- PC用 768px~909px -------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ @media (min-width: 768px) and (max-width: 909px) { /*スマホ用メニュー_非表示-----------------------------------------------------------------------------------------------------------------------*/ .mobile_menu { display:none; } #ham_background { display:none; } #fs_container1 { display:none; } #fs_container2 { display:none; } .br-pc { display:none; } #s_comment { display:none; } /*PC用メニュー----------------------------------------------------------------------------------------------------------------------------------*/ /*メニューバー始*/ #menu{ width:720px; height:35px; clear:both; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 8px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0; padding-right: 40px; padding-bottom: 0; padding-left: 40px; } #menu_item1{ width:64px; -webkit-box-ordinal-group:1; -ms-flex-order:1; order:1; } #menu_item1 img{ width:64px; height:30px; } #menu_item2{ width:71px; -webkit-box-ordinal-group:2; -ms-flex-order:2; order:2; } #menu_item3{ width:71px; -webkit-box-ordinal-group:3; -ms-flex-order:3; order:3; } #menu_item4{ width:83px; -webkit-box-ordinal-group:4; -ms-flex-order:4; order:4; } #menu_item5{ width:120px; -webkit-box-ordinal-group:5; -ms-flex-order:5; order:5; } #menu_item6{ width:71px; -webkit-box-ordinal-group:6; -ms-flex-order:6; order:6; } /*メニューバー終*/ hr { height:1px; width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); background-color:#000; border:none; margin: auto; position:relative; } /*タブバー始*/ .tab { height: 60px; width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); position: relative; z-index: 100; clear: both; margin-top: 6px; left: 6px; } .nav { overflow: hidden; clear:both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -ms-flex-pack: distribute; justify-content: space-around; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; margin-left: 12px; } .nav li { list-style: none; float: left; cursor:pointer; } .nav li a { display: block; text-align: center; color: #000; font-size: 12.3px; text-decoration: none; box-sizing: border-box; vertical-align: middle; } .nav > li:hover > a {/*layer-1*/ background-color:rgba(204,204,204,0.7); transition:all 1s; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .nav li ul { width: 103px; display: none; margin-left: 0px; position: absolute; background-color:#FFF; opacity:0.9; } .nav li ul li { text-align: center; width: 100%; } .nav li ul li a { font-size: 10px; color: #000; height: 20px; padding-top: 3px; } .nav > li li:hover > a {/*layer-2*/ background-color:rgba(204,204,204,0.7); transition:all 1s; } .nav li a span.en { display:inline; color: #000; } .nav li a:hover span.en { display:none; color: #999; } .nav li a span.jp { display:none; } .nav li a:hover span.jp { display:inline; } .nav .A { width: 27px; } .nav .B { width: 68px; } .nav .C { width: 75px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .nav .D { width: 95px; } .nav .E { width: 60px; } .nav .F { width: 40px; } .nav .G { width: 35px; } .nav .H { width: 40px; } .nav .I { width: 103px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .nav .J { width: 103px; } .nav .K { width: 103px; } .nav .B a .jp { font-size: 12px; } .nav .C a .jp { font-size: 12px; } .nav .D a .jp { font-size: 12px; } .nav .E a .jp { font-size: 12px; } .nav .F a .jp { font-size: 12px; } .nav .G a .jp { font-size: 12px; } .nav .H a .jp { font-size: 12px; } .nav .I a .en { color: #666; } .nav .I a .jp { color: #666; font-size: 12px; } .nav .I ul li a { color: #666; } .nav .J a .en { color: #666; } .nav .J a .jp { color: #666; font-size: 12px; } .nav .J ul li a { color: #666; } .nav .K a .en { color: #666; } .nav .K a .jp { color: #666; font-size: 12px; } .nav .K ul li a { color: #666; } /*タブバー終*/ /*インフォメーション*/ #infobox { margin: auto; height: 86px; width: 100vw; position: relative; clear: both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; } #houses_text { width:100px; height:50px; font-size: 16px; line-height:46px; text-align:center; position: relative; left:15px; bottom: 5px; color:rgba(0,0,0,1); top: 20px; border: 2px solid #FA0; box-sizing: border-box; } #houses_text a { position: absolute; top: 0; left: 0; height:100%; width: 100%; } #houses_text:hover{ background-color:#FA0; transition-duration: 0.3s; } /*インフォメーション*/ /*要素*/ #sentense { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; text-align: left; width: 640px; height: 50px; position: relative; left: 25px; line-height: 1; top: 37px; } #sentense .sentense1 { font-size: 13px; margin-right: 10px; } #sentense .sentense2 { font-size: 10px; } /*要素*/ /*PC本体*/ #comment { width: 100vw; height: 30px; margin-top: 30px; margin-left: auto; margin-right: auto; margin-bottom: auto; position: relative; clear: both; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; line-height: 12px; } #comment .intro1 { font-size: 12px; margin-left: 12px; } #comment .intro2 { font-size: 10px; margin-left: 12px; } #f_container1 { width: calc(100vw - 16px ); width: -webkit-calc (100vw - 16px ); width: -moz-calc (100vw - 16px ); height: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; clear: both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; margin: auto; } #f_container2 { width: calc(100vw - 16px ); width: -webkit-calc (100vw - 16px ); width: -moz-calc (100vw - 16px ); height: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; clear: both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; margin-top: 35px; margin-right: auto; margin-bottom: auto; margin-left: auto; } #f_squarebox { width: calc((100vw - 32px) * 1 / 5 ); width: -webkit-calc((100vw - 32px) * 1 / 5 ); width: -moz-calc((100vw - 32px) * 1 / 5 ); height: calc((100vw - 32px) * 1 / 5 ); height: -webkit-calc((100vw - 32px) * 1 / 5 ); height: -moz-calc((100vw - 32px) * 1 / 5 ); cursor:pointer; } #f_squarebox .e01 { height:100%; width:100%; } #f_squarebox .over { width: calc((100vw - 32px) * 1 / 5 ); width: -webkit-calc((100vw - 32px) * 1 / 5 ); width: -moz-calc((100vw - 32px) * 1 / 5 ); height: calc((100vw - 32px) * 1 / 5 ); height: -webkit-calc((100vw - 32px) * 1 / 5 ); height: -moz-calc((100vw - 32px) * 1 / 5 ); overflow: hidden; position: relative; } #f_squarebox .over .text .caption { font-size: 1vw; text-align: center; color: #fff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } #f_squarebox .over .text { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #f_squarebox .over:hover .text { opacity: 1; /* マスクを表示する */ } #f_squarebox .over .text .caption span { font-size: 14.5px; font-weight: lighter; } /*本体*/ #link { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 7pt; text-align: center; position:relative; width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); height: auto; clear:left; top: 10px; } #add { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 7pt; text-align: center; position:relative; width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); height: auto; clear:left; top: 10px; } } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------- PC用 910px~ -------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ @media (min-width: 910px) { /*スマホ用メニュー_非表示-----------------------------------------------------------------------------------------------------------------------*/ .mobile_menu { display:none; } #ham_background { display:none; } #fs_container1 { display:none; } #fs_container2 { display:none; } .br-pc { display:none; } #s_comment { display:none; } /*PC用メニュー----------------------------------------------------------------------------------------------------------------------------------*/ /*メニューバー始*/ #menu{ width:720px; height:35px; clear:both; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 8px; margin-right: auto; margin-left: auto; padding-right: 40px; padding-left: 40px; } #menu_item1{ width:64px; -webkit-box-ordinal-group:1; -ms-flex-order:1; order:1; } #menu_item1 img{ width:64px; height:30px; } #menu_item2{ width:71px; -webkit-box-ordinal-group:2; -ms-flex-order:2; order:2; } #menu_item3{ width:71px; -webkit-box-ordinal-group:3; -ms-flex-order:3; order:3; } #menu_item4{ width:83px; -webkit-box-ordinal-group:4; -ms-flex-order:4; order:4; } #menu_item5{ width:120px; -webkit-box-ordinal-group:5; -ms-flex-order:5; order:5; } #menu_item6{ width:71px; -webkit-box-ordinal-group:6; -ms-flex-order:6; order:6; } /*メニューバー終*/ hr { height:1px; width: 898px; background-color:#000; border:none; margin: auto; position:relative; } /*タブバー始*/ .tab { height: 60px; width: 898px; margin: auto; position: relative; z-index: 100; clear: both; margin-top: 6px; left: 6px; } .nav { overflow: hidden; clear:both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -ms-flex-pack: distribute; justify-content: space-around; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; margin-left: 12px; } .nav li { list-style: none; float: left; cursor:pointer; } .nav li a { display: block; text-align: center; color: #000; font-size: 12.3px; text-decoration: none; box-sizing: border-box; vertical-align: middle; } .nav > li:hover > a {/*layer-1*/ background-color:rgba(204,204,204,0.7); transition:all 1s; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .nav li ul { width: 103px; display: none; margin-left: 0px; position: absolute; background-color:#FFF; opacity:0.9; } .nav li ul li { text-align: center; width: 100%; } .nav li ul li a { font-size: 10px; color: #000; height: 20px; padding-top: 3px; } .nav > li li:hover > a {/*layer-2*/ background-color:rgba(204,204,204,0.7); transition:all 1s; } .nav li a span.en { display:inline; color: #000; } .nav li a:hover span.en { display:none; color: #999; } .nav li a span.jp { display:none; } .nav li a:hover span.jp { display:inline; } .nav .A { width: 27px; } .nav .B { width: 68px; } .nav .C { width: 75px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .nav .D { width: 95px; } .nav .E { width: 60px; } .nav .F { width: 40px; } .nav .G { width: 35px; } .nav .H { width: 40px; } .nav .I { width: 103px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .nav .J { width: 103px; } .nav .K { width: 103px; } .nav .B a .jp { font-size: 12px; } .nav .C a .jp { font-size: 12px; } .nav .D a .jp { font-size: 12px; } .nav .E a .jp { font-size: 12px; } .nav .F a .jp { font-size: 12px; } .nav .G a .jp { font-size: 12px; } .nav .H a .jp { font-size: 12px; } .nav .I a .en { color: #666; } .nav .I a .jp { color: #666; font-size: 12px; } .nav .I ul li a { color: #666; } .nav .J a .en { color: #666; } .nav .J a .jp { color: #666; font-size: 12px; } .nav .J ul li a { color: #666; } .nav .K a .en { color: #666; } .nav .K a .jp { color: #666; font-size: 12px; } .nav .K ul li a { color: #666; } /*タブバー終*/ /*インフォメーション*/ #infobox { margin: auto; height: 86px; width: 910px; position: relative; clear: both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; } #houses_text { width:100px; height:50px; font-size: 16px; line-height:46px; text-align:center; position: relative; left:15px; bottom: 5px; color:rgba(0,0,0,1); top:20px; border: 2px solid #FA0; box-sizing: border-box; } #houses_text a { position: absolute; top: 0; left: 0; height:100%; width: 100%; } #houses_text:hover{ background-color:#FA0; transition-duration: 0.3s; } /*インフォメーション*/ /*要素*/ #sentense { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; text-align: left; width: 740px; height: 50px; position: relative; left: 25px; line-height: 1; top: 37px; } #sentense .sentense1 { font-size: 13px; margin-right: 10px; } #sentense .sentense2 { font-size: 10px; } /*要素*/ /*PC本体*/ #comment { width: 910px; height: 30px; margin-top: 30px; margin-left: auto; margin-right: auto; margin-bottom: auto; position: relative; clear: both; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; line-height: 12px; } #comment .intro1 { font-size: 12px; margin-left: 12px; } #comment .intro2 { font-size: 10px; margin-left: 12px; } #f_container1 { width: calc(910px - 16px ); width: -webkit-calc (910px - 16px ); width: -moz-calc (910px - 16px ); height: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; clear: both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; margin: auto; } #f_container2 { width: calc(910px - 16px ); width: -webkit-calc (910px - 16px ); width: -moz-calc (910px - 16px ); height: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; clear: both; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; margin-top: 35px; margin-right: auto; margin-bottom: auto; margin-left: auto; } #f_squarebox { width: calc((910px - 32px) * 1 / 5 ); width: -webkit-calc((910px - 32px) * 1 / 5 ); width: -moz-calc((910px - 32px) * 1 / 5 ); height: calc((910px - 32px) * 1 / 5 ); height: -webkit-calc((910px - 32px) * 1 / 5 ); height: -moz-calc((910px - 32px) * 1 / 5 ); cursor:pointer; } #f_squarebox .e01 { height:100%; width:100%; } #f_squarebox .over { width: calc((910px - 32px) * 1 / 5 ); width: -webkit-calc((910px - 32px) * 1 / 5 ); width: -moz-calc((910px - 32px) * 1 / 5 ); height: calc((910px - 32px) * 1 / 5 ); height: -webkit-calc((910px - 32px) * 1 / 5 ); height: -moz-calc((910px - 32px) * 1 / 5 ); overflow: hidden; position: relative; } #f_squarebox .over .text .caption { font-size: 10px; text-align: center; color: #fff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } #f_squarebox .over .text { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display:-webkit-box; display:-ms-flexbox; display:-moz-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #f_squarebox .over:hover .text { opacity: 1; /* マスクを表示する */ } #f_squarebox .over .text .caption span { font-size: 14.5px; font-weight: lighter; } /*本体*/ #link { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 7pt; text-align: center; position:relative; width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); height: auto; clear:left; top: 10px; } #add { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 7pt; text-align: center; position:relative; width: calc(100vw - 12px); width: -webkit-calc(100vw - 12px); width: -moz-calc(100vw - 12px); height: auto; clear:left; top: 10px; } } /*本体*/