@charset "utf-8";

#wrapper {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    /*background-color: yellow;*/
}
.android #wrapper {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
}

/*====================================
    * ヘッダー
====================================*/
#header {   /* 初期設定はparts.cssで定義済み */
    top: 0  !important;
    left: 0 !important;
    background-color: #fcfcfc !important;
}
.header-top {
    position: relative;
    width: 50%;
    margin-top: -10px !important;
    margin-left: 30%;
    margin-right: auto;
}
.site-name {
    display: block;
    font-size: 1.2rem;
}
.foundation-name {
    display: block;
    margin-top: -20px;
    line-height: 1.0;
}

@media (min-width: 992px) {    /* xl タブレット横　ノートPC */
    #header {   /* 初期設定はparts.cssで定義済み */
        top: 0  !important;
        left: 0 !important;
        background-color: #fcfcfc !important;
    }
    .header-top {
        position: relative;
        width: 70% !important;
        height: auto;
        margin-left: 100px !important;
        margin-right: auto;
        margin-bottom: 40px !important;    /* 財団名の縦配置に影響 */
    }
    .header-top .header-name {
        position: relative;
        width: 600px !important;
        margin-top: 10px !important;
        margin-left: 55vw !important;
        margin-bottom: 10px !important;
    }
    .site-name {
        display: inline-block;
    }
    .foundation-name {
        display: inline-block;
    }
}

/*= ヘッダーメニュー =*/
@media (min-width: 992px) and (max-width: 1399px) {    /* xl タブレット横　ノートPC */
    .menu {
        position: relative;
        margin-left: -450px !important;
        display: flex;
        justify-content: space-between;
        min-width: 850px;
        max-width: 100%; /* 親要素の幅に収まるようにする【chatGPT】 */
        box-sizing: border-box; /* パディングやボーダーの計算を含める【chatGPT】 */
        margin-top: 1vw !important;
    }
    .menu-item {
        position: relative;
        width: 170px !important;
        height: auto;
        transition: opacity 0.3s;
        margin-left: 1vw !important;
    }
    .menu-item img:nth-of-type(1) {
        width: 92px;
        height: 50px;
    }
    .menu-item img:nth-of-type(2) {
        width: 112px !important;
        height: 50px;
    }
    .menu-item img:nth-of-type(3) {
        width: 92px;
        height: 50px;
    }
    .menu-item img:nth-of-type(4) {
        width: 92px;
        height: 50px;
    }
    .menu-item img:nth-of-type(5) {
        width: 92px;
        height: 50px;
    }
    .menu-item img:nth-of-type(6) {
        width: 112px;
        height: 50px;
    }
    .menu-item img:nth-of-type(7) {
        width: 92px;
        height: 50px;
    }
    .menu-item img:nth-of-type(8) {
        width: 96px;
        height: 50px;
    }
    .menu-item:hover img {
        opacity: 0.5;  /* アイコンを非表示 */
    }
    .menu-item:not(:hover) {
        opacity: 1;  /* ホバーされていない時は通常の透明度 */
    }
}

@media (min-width: 1400px) {	/* xxl　iMacなど超ワイド画面 */
    .menu {
        position: relative;
        margin-left: -500px !important;
        display: flex;
        justify-content: space-between;
        min-width: 850px;
        max-width: 100%; /* 親要素の幅に収まるようにする【chatGPT】 */
        box-sizing: border-box; /* パディングやボーダーの計算を含める【chatGPT】 */
        margin-top: 1vw !important;
    }
    .menu-item {
        position: relative;
        width: 170px !important;
        height: auto;
        transition: opacity 0.3s;
        margin-left: 1vw !important;
    }
    .menu-item img {
        width: 100% !important;
        height: 100%;
    }
    .menu-item:hover img {
        opacity: 0.5;  /* アイコンを非表示 */
    }
    .menu-item:not(:hover) {
        opacity: 1;  /* ホバーされていない時は通常の透明度 */
    }
}

/*========= 検索窓を開くためのボタン設定 ===========*/
.open-btn{
    position: absolute;
    top:10px;
    right:10px;
    background:url("../images/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
    background-size: 20px 20px;
    width:50px;
    height:50px;
    cursor: pointer;/*カーソルを指マークに*/
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn.btnactive{
    background:url("../images/icon_close.svg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/
    background-size: 18px 18px;
}

/*========= 検索窓の設定 ===============*/
/*==検索窓背景のエリア*/
#search-wrap{
    position:absolute;/*絶対配置にして*/
    top:150px;
    right:20px;
    z-index: -1;/*最背面に設定*/
    opacity: 0;/*透過を0に*/
    width:0;/*横幅は0に*/
    transition: all 0.4s;/*transitionを使ってスムースに現れる*/
    border-radius: 5px;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
    opacity: 1;/*不透明に変更*/
    z-index: 3;/*全面に出現*/
    width:280px;
    padding:20px;
    top:60px;
    background:#fff;
}

/*==検索窓*/
#search-wrap #searchform{
    display: none;/*検索窓は、はじめ非表示*/
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
#search-wrap.panelactive #searchform{
    display: block;/*検索窓を表示*/
}

/*==検索フォームの設定*/

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input{
    -webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
    outline: none;
    cursor: pointer;/*カーソルを指マークに*/
    color: #666;
}

/*テキスト入力input設定*/
#search-wrap input[type="text"] {
    width: 100%;
    font-size: 1.2rem;
    border: none;
    border-bottom:2px solid #ccc;
    transition: all 0.5s;
    letter-spacing: 0.05em;
    height:46px;
    padding: 10px;
}

/*テキスト入力inputにフォーカスされたら*/
#search-wrap input[type="text"]:focus {
    background:#eee;/*背景色を付ける*/
}

/*ボタンinput設定*/
#search-wrap input[type="submit"] {
    position: absolute;
    top:10px;
    right:30px;
    background:url("../images/icon_search.svg") no-repeat right;/*虫眼鏡アイコンを背景に表示*/
    background-size: 20px 20px;
    width:30px;
    height: 60px;
}

/*====================================
    * モバイル・トグルメニュー
====================================*/
/*⇒⇒ parts.cssに記述 */

/*====================================
    * トップページ・メイン画像
====================================*/

/*== スクロールすると下のエリアがヘッダーにかぶさる ==*/
#top-main{
    position: relative;
    width:100%;
    height: auto !important;
}
#top-main:before{
    content: '';
    position:fixed;
    /*top:400px;   /*背景画像縦位置*/
    /*left:5%;*/
    z-index:-1;
    width:90%;
    /*背景画像設定*/
    /*background:url("../images/bg_top.png") no-repeat center;*/
    /*background-size: 100%;*/
}

@media screen and (max-width:768px) {
    #top-main:before{
        background-position: top center;
        background-size:auto 90%;
    }
}
h1.logoSaruhashiPrize {
    position: relative;
    width: 40vw;
    height: 40vh;
    margin-top: 100px !important;
    margin-left: auto;
    margin-right: auto;
}
.leadTop {
    position:absolute;
    top: 60px;
    left: 10px;
    width: 300px;
    height: 50px;                   /*リード文天地位置決め1*/
}
.leadTop img {
    display: none;
}
.leadTop span {
    display: block;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.2;
}
.nameFoundation {
    display: none;
    /*position: absolute;
    top: 100px;
    left: 10px;
    width: 300px;
    height: 50px;*/                   /*リード文天地位置決め1*/
}
@supports (-ms-ime-align:auto) {    /* Edge用フック */
    .nameFoundation {
        margin-top: -400px !important;   /*財団名天地位置決め*/
    }
}
@media screen and (min-width:769px) {
    #top-main {
        position: relative;
        margin-left: 100px !important;
    }
    h1.logoSaruhashiPrize {
        position: relative;
        width: 20vw;
        height: 20vh;
        margin-top: 100px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .leadTop {
        display: block;
        position:absolute;
        top: 140px;
        left: 150px;
        width: 800px;
        height: 100px;                   /*リード文天地位置決め1*/
    }
    .leadTop img {
        display: block;
    }
    .leadTop span {
        display: none;
    }
    .nameFoundation {
        display: block;
        position: absolute;
        top: 160px;
        left: 250px;
        width: 600px;
        height: 100px;                   /*リード文天地位置決め1*/
    }
}

/*== トップページメインメニュー ==*/
.top-main-menu {
    /*position: absolute;
    top: 130px;
    left: -200px;
    width: 60%;
    height: 60%;
    padding: 10px;
    z-index: 5;*/    /*この数値によってリンクが効かなくなる*/
    display: none;
}
.column-3-1 {
    display: block;
    margin-top: -20px;
    margin-left: 200px;
}
.column-3-2 {
    display: block;
    margin-top: 10px;
    margin-left: 200px;
}
.column-1 {
    margin-top: -10px;
    margin-left: 200px;
}
.main-menu-item a {
    display: block;
    width: 33.33%;
    height: auto;
    margin-right: 50px;
}
.main-menu-item a:hover {
    opacity: 0.5;
}
.column-3-1 .main-menu-item:nth-of-type(1) img {
    width: 170px;
    height: 43px;
}
.column-3-1 .main-menu-item:nth-of-type(2) img {
    width: 170px;
    height: 43px;
}
.column-3-1 .main-menu-item:nth-of-type(3) img {
    width: 170px;
    height: 43px;
}
.column-3-2 .main-menu-item:nth-of-type(1) img {
    width: 170px;
    height: 44px;
}
.column-3-2 .main-menu-item:nth-of-type(2) img {
    width: 170px;
    height: 44px;
}
.column-3-2 .main-menu-item:nth-of-type(3) img {
    width: 170px;
    height: 44px;
}
.column-1 .main-menu-item img {
    width: 618px;
    height: 152px;
}
@media screen and (min-width:769px) {
    .top-main-menu {
        display: block;
        position: absolute;
        top: 260px;
        left: -100px;
        width: 1000px;
        padding: 10px;
        z-index: 5;    /*この数値によってリンクが効かなくなる*/
    }
    .column-3-1 {
        display: flex;
        margin-top: -20px;
        margin-left: 200px;
    }
    .column-3-2 {
        display: flex;
        margin-left: 400px;
        margin-top: 10px;
    }
    .column-1 {
        margin-left: 500px;
        margin-top: -10px;
    }
    .main-menu-item a {
        display: block;
        width: 33.33%;
        height: auto;
        margin-right: 50px;
    }
    .main-menu-item a:hover {
        opacity: 0.5;
    }
    .column-3-1 .main-menu-item:nth-of-type(1) img {
        width: 170px;
        height: 43px;
    }
    .column-3-1 .main-menu-item:nth-of-type(2) img {
        width: 170px;
        height: 43px;
    }
    .column-3-1 .main-menu-item:nth-of-type(3) img {
        width: 170px;
        height: 43px;
    }
    .column-3-2 .main-menu-item:nth-of-type(1) img {
        width: 170px;
        height: 44px;
    }
    .column-3-2 .main-menu-item:nth-of-type(2) img {
        width: 170px;
        height: 44px;
    }
    .column-3-2 .main-menu-item:nth-of-type(3) img {
        width: 170px;
        height: 44px;
    }
    .column-1 .main-menu-item img {
        width: 618px;
        height: 152px;
    }
}

/*== トップページメインイメージ ==*/
.main-image {
    position: absolute;
    top: 100px;
    left: 0px;
    display: block;
    width: 100%;
    height: 100%;
}
@media screen and (min-width:769px) {
    .main-image {
        position: relative;
        margin-top: 50px;
        margin-left: 0px;
        display: block;
        width: 100%;
        height: 100%;
    }
}


/*====================================
    * トップページコンテンツ
====================================*/

#container{
    position: relative;
    z-index: 1;
    background:#fff;
    margin-top: 0px;
}
main {
    width: 100%;
    background-color: #fff;
    z-index: 2;
}
#subscription .top-title-subscription {

}

/*== 最新のNEWS（更新情報・お知らせ） ==*/
#topics {
    position: relative;
    width: 75%;
    margin-left: 15%;
    z-index: 999 !important;    /*この数値によってリンクが効かなくなる*/
}
#topics .newsLine li {
    line-height: 3;
    border-bottom: 2px #666 dotted;
}
#topics .newsLine li a {
    cursor: pointer;
}
#topics .newsLine li a:hover {
    color: red;
    text-decoration: underline;
}

/*== 共通設定 ==*/
.top-title-column {
    position: relative;
    width: 977px;
    height: 50px;
    font-size: 2rem;
    background: url(../images/bg_top-title.png) 0px 20px no-repeat;
    color: #000 !important;
    text-align: center;
    margin-left: 27% !important;
}
.toDetail {
    position: relative;
    display: block;
    width: 250px !important;
    height: 47px !important;
    margin-left: 800px !important;
    margin-top: 20px;
}
.toDetail a:hover {
    opacity: 0.7;
}
/*== 猿橋賞とは ==*/
#column_what {
    position: relative;
    margin-top: 50px;
    padding-left: auto;
    padding-right: auto;
    background-color: #fff;
}
#column_what .top-title-column {
    margin-left: 13% !important;
    margin-left: 13% !important;
}
#column_what .column-2 {
    position: relative;
    display: flex;
    width: 80%;
    margin-top: 50px;
    margin-left: 170px;
}
#column_what .columnLeft {
    width: 20%;
}
#column_what .columnLeft img {
    position: relative;
    width: 90%;
    height: auto;
}
#column_what .columnLeft .founderName {
    font-size: 1rem;
}
#column_what .columnRight {
    width: 80%;
}
#column_what p {
    position: relative;
    width: 82%;
    height: auto;
    text-align: left;
    margin-top: -10px;
    margin-left: 10% !important;
    margin-right: 10% !important;
}

/*== 本年の受賞者 ==*/
#column_winner {
    position: relative;
    background-color: #fff;
    margin-top: 50px;
    padding-left: auto;
    padding-right: auto;
}
#column_winner .top-title-column {
    margin-left: 13% !important;
    margin-left: 13% !important;
}
#column_winner .column-2 {
    position: relative;
    display: flex;
    width: 80%;
    margin-top: 50px;
    margin-left: 170px;
}
#column_winner .columnLeft {
    width: 20%;
}
#column_winner .columnLeft img {
    position: relative;
    width: 90%;
    height: auto;
}
#column_winner .columnRight {
    width: 80%;
}
#column_winner .profile {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: -10px;
}
#column_winner .summary {
    display: block;
    width: 150px;
    height: 45px;
    text-align: center;
    padding: 5px;
    border: 1px #666 solid;
}
#column_winner .ttlJp {
    font-weight: bold;
}
#column_winner .ttlEn {
    font-weight: bold;
    margin-top: 0px;
}
#column_winner p {
    position: relative;
    width: 82%;
    height: auto;
    text-align: left;
    margin-top: 20px;
    margin-left: 10% !important;
    margin-right: 10% !important;
}

/*== 推薦募集要項 ==*/
#column_subscription {
    position: relative;
    background-color: #fff;
    margin-top: 50px;
    padding-left: auto;
    padding-right: auto;
}
#column_subscription .top-title-column {
    margin-left: 14% !important;
    margin-left: 14% !important;
}
#column_subscription p {
    position: relative;
    width: 70%;
    height: auto;
    text-align: left;
    text-justify: auto;
    margin-top: 20px;
    margin-left: 15% !important;
    margin-right: 15% !important;
}

/*== 賛助会員にご加入とご寄附のお願い ==*/
.pleaseDonate {
    margin-top: 100px;
    margin-left: 25%;
    margin-right: 25%;
}
.pleaseDonate p a {
    position: relative;
    width: 300px;
    height: 80px;
    border: 4px #eb6100 double;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 20px;
}
.pleaseDonate p a:hover {
    opacity: 0.5;
}



/*====================================
    * フッター
====================================*/

/* footer */
#footer{
    position: relative;
    /*height: 220px;*/
    padding: 28px 0;
    border-top:1px solid #333;
    text-align: center;
    background: #666;
    margin-top: 0px !important;
}

#footer p {
    font-weight: bold;
    letter-spacing: 0.3em;
    margin: 0 0 10px 0;
    color: #fff;
}
#footer .footer-logo {
    font-size: 1.5rem;
}
#footer .name-foundation {
    font-size: 1.2rem;
}
#footer address {
    font-style: normal;
    color: #fff;
    margin: 0 0 10px 0;
}
#footer .footer-menu a {
    color: #fff;
}
#footer .footer-menu a:hover {
    color: #eb6100;
}
#footer small{
    color:#fff;
}

/*== ページTopnボタン ==*/
/*リンクの形状*/
#page-top a{
    display: flex;
    justify-content:center;
    align-items:center;
    background:#f69d62;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size:0.6rem;
    transition:all 0.3s;
}
#page-top a:hover{
    background: #f67341;
}

/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom:10px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
    animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/
#page-top.DownMove{
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(100px);
    }
}